<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>javaScript | 李世龙</title><meta name="keywords" content="javaScript"><meta name="author" content="lee"><meta name="copyright" content="lee"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="前端核心">
<meta property="og:type" content="article">
<meta property="og:title" content="javaScript">
<meta property="og:url" content="http://blog.cai2.wang/2021/12/01/Done/JavaScript/index.html">
<meta property="og:site_name" content="李世龙">
<meta property="og:description" content="前端核心">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Freelancer_re_irh4.png">
<meta property="article:published_time" content="2021-11-30T23:05:20.000Z">
<meta property="article:modified_time" content="2022-08-23T11:34:34.819Z">
<meta property="article:author" content="lee">
<meta property="article:tag" content="javaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Freelancer_re_irh4.png"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg"><link rel="canonical" href="http://blog.cai2.wang/2021/12/01/Done/JavaScript/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'javaScript',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-08-23 19:34:34'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/index.min.css"><link rel="stylesheet" href="/css/bg.css"><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">李世龙</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">javaScript</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-30T23:05:20.000Z" title="发表于 2021-12-01 07:05:20">2021-12-01</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-08-23T11:34:34.819Z" title="更新于 2022-08-23 19:34:34">2022-08-23</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/javaScript/">javaScript</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">38k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>153分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="javaScript"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="1-什么是-JavaScript"><a href="#1-什么是-JavaScript" class="headerlink" title="1, 什么是 JavaScript"></a>1, 什么是 JavaScript</h1><ul>
<li>JavaScript 是世界上最流行的语言之一 , 是一种运行在客户端的脚本语言 ( Script就是脚本的意思 )</li>
<li>脚本语言 : 不需要编译 , 运行过程中由 JS 引擎逐行来进行解释并执行</li>
<li>现在可以基于 Node.js 做服务端开发</li>
</ul>
<h2 id="1-1-JavaScript-的作用"><a href="#1-1-JavaScript-的作用" class="headerlink" title="1,1 JavaScript 的作用"></a>1,1 JavaScript 的作用</h2><ul>
<li>表单验证 ( 密码的强度 ) <strong>JS产生的目的</strong></li>
<li>网页的特效</li>
<li>服务端开发 (Node.js)</li>
<li>桌面应用</li>
<li>App</li>
</ul>
<h2 id="1-2-HTML-CSS-JavaScript"><a href="#1-2-HTML-CSS-JavaScript" class="headerlink" title="1,2 HTML/CSS/JavaScript"></a>1,2 HTML/CSS/JavaScript</h2><p><strong>HTML / CSS 标记语言 – 描述类语言</strong></p>
<ul>
<li>HTML 决定了网页的结构和内容 ( 决定要看什么 )</li>
<li>CSS 决定了网页呈现给用户的样子</li>
</ul>
<p><strong>JavaScript脚本语言 – 编程类语言</strong></p>
<ul>
<li>实现业务逻辑和页面的控制</li>
</ul>
<h2 id="1-3-浏览器执行-JS"><a href="#1-3-浏览器执行-JS" class="headerlink" title="1,3 浏览器执行 JS"></a>1,3 浏览器执行 JS</h2><p>浏览器分为两个部分 <strong>渲染引擎</strong> 和 <strong>JS引擎</strong></p>
<ul>
<li><p><strong>渲染引擎</strong> : 用来解释 HTML 和 CSS , 俗称内核</p>
</li>
<li><p><strong>JS引擎</strong> : 也称为 JS 解释器 , 用来读取网页中的 JS 代码 , 对其进行处理</p>
<p><strong>浏览器本身是不会 JS 的 , 而是通过内置的 JS 引擎来执行 JS 代码 , JS 引擎执行代码时逐行解释每一句源码 ( 转换为机器语言) , 然后由计算机执行 , 逐行解释逐行只执行 , 这种语言就是脚本</strong></p>
</li>
</ul>
<h2 id="1-4-JS-的组成部分"><a href="#1-4-JS-的组成部分" class="headerlink" title="1,4 JS 的组成部分"></a>1,4 JS 的组成部分</h2><ul>
<li><p><strong>ECMAScript</strong> : JavaScript的标准 , 语法</p>
<p>规定了 JavaScript 编程语法和核心的基础知识 , 所有的浏览器厂商共同遵循的一套 JS 语法的工业标准</p>
</li>
<li><p><strong>DOM</strong> : 网页文档对象模型</p>
<p>Document Object Model</p>
<p>我们可以同过这个对象对页面中的元素进行控制</p>
</li>
<li><p><strong>BOM</strong> : 浏览器对象模型</p>
<p>Browser Object Model</p>
<p>我们可以同过这个对象来操作浏览器</p>
</li>
</ul>
<h1 id="2-JS-的三种"><a href="#2-JS-的三种" class="headerlink" title="2, JS 的三种"></a>2, JS 的三种</h1><p><strong>行内 , 内嵌 和 外部</strong></p>
<h2 id="2-1-行内引入-JS"><a href="#2-1-行内引入-JS" class="headerlink" title="2,1 行内引入 JS"></a>2,1 行内引入 JS</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    oncklick:代表着点击事件,当鼠标点击这个元素的时发生的事情</span></span><br><span class="line"><span class="comment">    alert():弹出一个提示框</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">&quot;alert(&#x27;你好鸭,我是行内引入&#x27;)&quot;</span>&gt;</span>行内引入<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>可以将单行或者少量的 JS 代码写在 HTML 标签中的事件属性中 (  以 on 开头的属性 ) , 比如 : onclick</p>
</li>
<li><p>注意单双引号的使用 , 在HTML中推荐使用双引号 , 在 JS 中推荐使用单引号</p>
</li>
<li><p>行内引入的写法 , 可读性很差</p>
</li>
<li><p>引号容易写错</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022085817485.png" alt="image-20211022085817485">    </p>
</li>
</ul>
<h2 id="2-2-内嵌式引入"><a href="#2-2-内嵌式引入" class="headerlink" title="2,2 内嵌式引入"></a>2,2 内嵌式引入</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">内嵌式引入</span></span><br><span class="line"><span class="comment">通过Script标签进行引入</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    alert(<span class="string">&#x27;你好鸭,我是内嵌式引入&#x27;</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022085831067.png" alt="image-20211022085831067" style="zoom:80%;" />    

<ul>
<li>可以将 JS 代码写在 script 标签中</li>
</ul>
<h2 id="2-3-外部引入"><a href="#2-3-外部引入" class="headerlink" title="2,3 外部引入"></a>2,3 外部引入</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    外部引入</span></span><br><span class="line"><span class="comment">    通过Script标签进行外部引入</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;js/tst.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022085946260.png" alt="image-20211022085946260" style="zoom: 80%;" />    

<ul>
<li>利用 HTML 页面的结构化代码 , 把大段的 JS 代码独立到 HTML 文档之外 , 既美观 , 也方便文件的复用</li>
<li><strong>==注意 : 引入外部 JS 文件的 Script 标签中不可以写代码的==</strong>     </li>
<li>适用于 JS 代码量较大的情况 , 也是实际开发中最常使用的</li>
</ul>
<h1 id="3-JS-中的注释"><a href="#3-JS-中的注释" class="headerlink" title="3, JS 中的注释"></a>3, JS 中的注释</h1><ul>
<li>单行注释 : // 快捷键 Ctrl+/</li>
<li>多行注释 : /* 多行注释 */ Ctrl+shift+/</li>
</ul>
<h1 id="4-JS-中的输入输出语句"><a href="#4-JS-中的输入输出语句" class="headerlink" title="4, JS 中的输入输出语句"></a>4, JS 中的输入输出语句</h1><ul>
<li><strong>alert()</strong> : 浏览器弹出警告框 </li>
<li><strong>console.log()</strong> : 浏览器的控制台输入</li>
<li><strong>prompt()</strong> : 弹出输入框</li>
<li>**confirm() **: 弹出一个带有取消和确认按钮的提示框</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">alert(<span class="string">&#x27;我是一个警示框&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;你好鸭,我们又见面了&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> str = prompt(<span class="string">&#x27;请输入你的名字&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(str);</span><br><span class="line"><span class="keyword">var</span> bool = confirm(<span class="string">&#x27;您确认删除这条数据吗?&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bool);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022091352481.png" alt="image-20211022091352481" style="zoom:50%;" />    



<h1 id="5-变量"><a href="#5-变量" class="headerlink" title="5, 变量"></a>5, 变量</h1><h2 id="5-1-变量的使用"><a href="#5-1-变量的使用" class="headerlink" title="5,1 变量的使用"></a>5,1 变量的使用</h2><p>JS 中使用 <strong>var</strong> 关键字利于声明变量 , 访问变量的时候通过变量名访问</p>
<p>变量的使用步骤</p>
<ol>
<li><p>声明一个变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名;</span><br></pre></td></tr></table></figure></li>
<li><p>赋值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">变量名 = 变量值;</span><br></pre></td></tr></table></figure></li>
</ol>
<p><strong>声明和赋值合二为一</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = 变量值;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	声明名称,年龄,人生目标</span></span><br><span class="line"><span class="comment">	在控制台打印:</span></span><br><span class="line"><span class="comment">	我叫XXX , 今年XX 岁 , 我的目标是XXXXXX;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> username = <span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">20</span>;</span><br><span class="line"><span class="keyword">var</span> target = <span class="string">&#x27;世界和平!!&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;姓名:&#x27;</span> + username + <span class="string">&#x27;,年龄:&#x27;</span> + age + <span class="string">&#x27;.我的目标:&#x27;</span> + target);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022125437565.png" alt="image-20211022125437565" style="zoom:67%;" />    

<p><strong>一次性声明多个变量 , 使用一个 var , 用 “,” 间隔开</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> username = <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">    age = <span class="number">20</span>,</span><br><span class="line">    target = <span class="string">&#x27;世界和平!!&#x27;</span>;</span><br></pre></td></tr></table></figure>



<h2 id="5-2-变量使用的特殊情况"><a href="#5-2-变量使用的特殊情况" class="headerlink" title="5,2 变量使用的特殊情况"></a>5,2 变量使用的特殊情况</h2><ul>
<li>只声明不赋值</li>
<li>不声明只赋值</li>
<li>不声明不赋值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 只声明不赋值</span></span><br><span class="line"><span class="keyword">var</span> abc;</span><br><span class="line"><span class="comment">// 因为我们在此处只声明了变量但是没有赋值</span></span><br><span class="line"><span class="comment">// 程序也没有办法判断你定义的是什么,所以结果是undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(abc);<span class="comment">//undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 不声明只赋值 (不推荐)</span></span><br><span class="line">efg = <span class="number">123</span>;</span><br><span class="line"><span class="built_in">console</span>.log(efg);<span class="comment">//123</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 不声明,不赋值,直接用</span></span><br><span class="line"><span class="built_in">console</span>.log(hij);<span class="comment">//报错</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022130651815.png" alt="image-20211022130651815" style="zoom:67%;border: solid" />    



<h2 id="5-3-变量的命名规范"><a href="#5-3-变量的命名规范" class="headerlink" title="5,3 变量的命名规范"></a>5,3 变量的命名规范</h2><ul>
<li>有英文 , 数字 , 下划线 , 美元符 组成 , 比如 : userAge , num01_ , _Name</li>
<li>不能使用数字开头 , 但是可以包含数字 , 18Age就是错误的</li>
<li>严格区分大小写 , a 和 A 是不同的</li>
<li>不能使用关键字 , 保留字 , 比如: for , var , while …</li>
<li>变量的命名要做到 <strong>见名知意</strong></li>
<li>遵循小驼峰式的命名规范 , 首字母小写 , 之后的每个单词的首字母大写</li>
</ul>
<p><strong><font color=red>注意 : name最好不要用作变量名 , 在某些浏览器中是有提前定义</font></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 直接使用name</span></span><br><span class="line"><span class="built_in">console</span>.log(name);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022132008483.png" alt="image-20211022132008483" style="zoom:67%;border: solid" />    



<h1 id="6-数据类型"><a href="#6-数据类型" class="headerlink" title="6, 数据类型"></a>6, 数据类型</h1><h2 id="6-1-JS中数据类型的分类"><a href="#6-1-JS中数据类型的分类" class="headerlink" title="6,1 JS中数据类型的分类"></a>6,1 JS中数据类型的分类</h2><p>JS 中将数据类型分为了 2 种</p>
<ul>
<li>简单数据类型 : Number , String , Boolean , Undefined , Null</li>
<li>复杂数据类型 : Object</li>
</ul>
<h2 id="6-2-变量的数据类型"><a href="#6-2-变量的数据类型" class="headerlink" title="6,2 变量的数据类型"></a>6,2 变量的数据类型</h2><p>变量是用来存储数值的空间 , 他有自己的名称和数据类型</p>
<p>变量的数据类型决定了这些数值将如何存储到内存中</p>
<p><strong>JS 是一种弱类型的 或者 动态类型的语言</strong> , 这意味在使用变量的时候 , 不用提前声明数据类型 , 在程序的运行过程中被确定的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,此时变量没有被赋值,所以没有具体的数据类型</span></span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="comment">// 2,JS的变量数据类型是在程序的运行过程中,根据=后面的数据进行判断的</span></span><br><span class="line">num = <span class="number">100</span>;<span class="comment">// 此时num是数字类型</span></span><br><span class="line"><span class="comment">// 3,如果变量的值得类型变了,变量的数据类型也会改变</span></span><br><span class="line">num = <span class="string">&#x27;张三&#x27;</span>;<span class="comment">// 此时num是字符串类型的</span></span><br><span class="line"><span class="built_in">console</span>.log(num);<span class="comment">//张三</span></span><br></pre></td></tr></table></figure>

<p>在代码运行的时候 , 变量的数据类型是 <strong>JS引擎 , 根据 = 右侧的变量值得数据类型来判断的</strong></p>
<p>程序运行完毕之后 , 变量的数据类型就确定了</p>
<p><strong>动态类型 : 变量的数据类型是不固定的 , 他会跟着变量值得变化而变化</strong></p>
<h2 id="6-3-Number-类型"><a href="#6-3-Number-类型" class="headerlink" title="6,3 Number 类型"></a>6,3 Number 类型</h2><ul>
<li><strong>JS 的数字类型可以保存整数和小数</strong></li>
<li><strong>数字类型的最大值和最小值</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> float = <span class="number">2.5</span>;</span><br><span class="line"><span class="comment">// 数字类型拥有最大值和最小值</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.MAX_VALUE);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.MIN_VALUE);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022140131571.png" alt="image-20211022140131571">    </p>
<ul>
<li><strong>数字类型的三个特殊的值</strong><ul>
<li><strong>infinity</strong> : 无穷大</li>
<li><strong>-infinity</strong> : 无穷小</li>
<li><strong>NaN</strong> : not an number , 代表不是数字类型</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// number中三个特殊值</span></span><br><span class="line"><span class="comment">// 1,无穷大</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.MAX_VALUE * <span class="number">2</span>);</span><br><span class="line"><span class="comment">// 2,无穷小</span></span><br><span class="line"><span class="built_in">console</span>.log(-<span class="built_in">Number</span>.MAX_VALUE * <span class="number">2</span>);</span><br><span class="line"><span class="comment">// 3,非数字</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;张三&#x27;</span> - <span class="number">100</span>);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022140303286.png" alt="image-20211022140303286">    </p>
<ul>
<li><strong>isNaN()</strong></li>
</ul>
<p>在 JS 中通过 isNaN 方法来判断非数字</p>
<p>结果会是一个布尔值 , 是数字返回false , 不是数字true</p>
<p><strong>使用场景 : 判断用户使用的数值是否是数字类型的</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// isNaN判断非数字</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">isNaN</span>(<span class="number">666</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">isNaN</span>(<span class="string">&#x27;欧阳震华&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h2 id="6-4-字符串-String"><a href="#6-4-字符串-String" class="headerlink" title="6,4 字符串 String"></a>6,4 字符串 String</h2><p>字符串类型的数据可以是引号中的任意内容 , 其语法为 <strong>单引号</strong> 或者 <strong>双引号</strong> 中包括的内容</p>
<p>如果字符内容不写在引号中 , 会直接报错</p>
<p>==推荐使用单引号 , 为了区分HTML==</p>
<ul>
<li><strong>字符串单双引号的嵌套</strong></li>
</ul>
<p>如果我们需要在一个字符串中同时使用单引号和双引号</p>
<p>JS 可以 <strong>单引号嵌套双引号</strong> , <strong>双引号嵌套单引号</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 单双引号可以嵌套使用</span></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">&#x27;怒发冲冠凭栏处,&quot;潇潇雨歇&quot;.&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&quot;抬望眼,仰天长啸,&#x27;壮怀激烈&#x27;.&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str1);</span><br><span class="line"><span class="built_in">console</span>.log(str2);</span><br></pre></td></tr></table></figure>



<ul>
<li><strong>字符串的转义字符</strong><ul>
<li>\n : 换行</li>
<li>\\ : \ 一个反斜线</li>
<li>\‘ : 单引号</li>
<li>\“ : 双引号</li>
<li>\t : 制表符</li>
<li>\b : 一个空格</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 转义字符</span></span><br><span class="line"><span class="comment">// \ + 对应的字母或者是标点</span></span><br><span class="line"><span class="keyword">var</span> str3 = <span class="string">&quot;\\抬望眼,\n\&#x27;仰天\t长啸\&#x27;,\&quot;壮怀\b激烈\&quot;.&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str2);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022150306336.png" alt="image-20211022150306336" style="zoom:80%;border: solid" />    



<ul>
<li>字符串的长度 : <strong>length</strong> 属性</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过字符串的 length 检测字符串的长度</span></span><br><span class="line"><span class="keyword">var</span> str4 = <span class="string">&#x27;Hello,My name is zhangsan&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;str4长度:&#x27;</span> + str4.length);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022150359033.png" alt="image-20211022150359033" style="zoom:80%;border: solid" />    

<p>​    </p>
<ul>
<li><strong>字符串的拼接</strong></li>
</ul>
<p>① 多个字符进行拼接可以用 （+）进行 ， 拼接方式为==字符串+字符串= 拼接后的字符串==</p>
<p>② 拼接前会把字符串相加的==任何类型转换成字符串== , 在拼接成字符串</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串的拼接(+)</span></span><br><span class="line"><span class="keyword">var</span> v1 = <span class="string">&#x27;Hello~&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> v2 = <span class="string">&#x27;World&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(v1 + v2);</span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;年龄:&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> age = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">console</span>.log(msg + age);</span><br><span class="line"><span class="built_in">console</span>.log(msg + <span class="literal">true</span>);</span><br><span class="line"><span class="built_in">console</span>.log(msg + <span class="literal">null</span>);</span><br><span class="line"><span class="built_in">console</span>.log(msg + <span class="literal">undefined</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + <span class="number">3</span> + <span class="string">&#x27;5&#x27;</span> + <span class="number">7</span>);<span class="comment">// 结果: 457</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211022150727593.png" alt="image-20211022150727593" style="zoom:70%; border: solid" />    



<h2 id="6-5-Boolean"><a href="#6-5-Boolean" class="headerlink" title="6,5 Boolean"></a>6,5 Boolean</h2><p>布尔类型只有两个值 : <strong>true (真) , false (假)</strong></p>
<p>true : 在数字中代表1</p>
<p>false : 在数字中代表0</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明布尔值变量</span></span><br><span class="line"><span class="keyword">var</span> bool1 = <span class="literal">true</span>;</span><br><span class="line"><span class="keyword">var</span> bool2 = <span class="literal">false</span>;</span><br><span class="line"><span class="built_in">console</span>.log(bool1 + <span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(bool2 + <span class="number">1</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025074915037.png" alt="image-20211025074915037" style="zoom:80%;border: solid" />    



<h2 id="6-6-Undefined-和-Null"><a href="#6-6-Undefined-和-Null" class="headerlink" title="6,6 Undefined 和 Null"></a>6,6 Undefined 和 Null</h2><ul>
<li>Undefined</li>
</ul>
<p>一个变量没有赋值会有一个默认的值 <strong>undefined</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个变量,但是不进行赋值</span></span><br><span class="line"><span class="keyword">var</span> str;</span><br><span class="line"><span class="built_in">console</span>.log(str);</span><br><span class="line"><span class="comment">// 赋值一个变量为 undefined</span></span><br><span class="line"><span class="keyword">var</span> aa = <span class="literal">undefined</span>;</span><br><span class="line"><span class="comment">// 和字符串连接</span></span><br><span class="line"><span class="built_in">console</span>.log(aa + <span class="string">&#x27;test&#x27;</span>);<span class="comment">// undefinedtest</span></span><br><span class="line"><span class="comment">// 如果和数字相加</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span> + aa);<span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025080301900.png" alt="image-20211025080301900" style="zoom:80%;border: solid" />    



<ul>
<li>Null</li>
</ul>
<p>当为一个变量赋值为空值的时候 , 结果会是 null</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 给一个变量赋值为null</span></span><br><span class="line"><span class="keyword">var</span> temp = <span class="literal">null</span>;</span><br><span class="line"><span class="comment">// 和字符串连接</span></span><br><span class="line"><span class="built_in">console</span>.log(temp + <span class="string">&#x27;test&#x27;</span>);<span class="comment">// nulltest</span></span><br><span class="line"><span class="comment">// 如果和数字相加</span></span><br><span class="line"><span class="built_in">console</span>.log(temp + <span class="number">1</span>);<span class="comment">// 空值和数字进行计算的结果就是数字本身的结果</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025080416148.png" alt="image-20211025080416148" style="zoom:80%;border: solid" />    



<h2 id="6-7-获取变量的数据类型"><a href="#6-7-获取变量的数据类型" class="headerlink" title="6,7 获取变量的数据类型"></a>6,7 获取变量的数据类型</h2><p>通过 <strong>typeof</strong> 方法可以检测变量的数据类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 测试通过 typeof 检测变量数据类型</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">123</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> num);</span><br><span class="line"><span class="keyword">var</span> msg = <span class="string">&#x27;hello~&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> msg);</span><br><span class="line"><span class="keyword">var</span> bool = <span class="literal">false</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> bool);</span><br><span class="line"><span class="keyword">var</span> varialbe;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> varialbe);</span><br><span class="line"><span class="keyword">var</span> obj = <span class="literal">null</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> obj);</span><br><span class="line"><span class="comment">// 通过typeof判断 prompt()获取用户输入的内容的数据类型</span></span><br><span class="line"><span class="keyword">var</span> age = prompt(<span class="string">&#x27;请输入您的年龄&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(age);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> age);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025091811513.png" alt="image-20211025091811513" style="zoom:80%;border: solid" />    



<h2 id="6-8-字面量"><a href="#6-8-字面量" class="headerlink" title="6,8 字面量"></a>6,8 字面量</h2><p>字面量是在源代码中的一个固定的值的表现 , 通俗来说 , 就是通过变量的数字来判断如果表达这个值</p>
<ul>
<li>数值的字面量 : 100, 10 , 10.25 , 55……..</li>
<li>字符串 : ‘Hello’ , “你好” …….</li>
<li>布尔 : true , false</li>
</ul>
<h1 id="7-数据类型的转换"><a href="#7-数据类型的转换" class="headerlink" title="7, 数据类型的转换"></a>7, 数据类型的转换</h1><p><strong>JS 中的三种转换 :</strong></p>
<ul>
<li>转换为字符串类型</li>
<li>转换为数字类型</li>
<li>转换为布尔类型</li>
</ul>
<h2 id="7-1-转换为String"><a href="#7-1-转换为String" class="headerlink" title="7,1 转换为String"></a>7,1 转换为String</h2><p>**方式 : **</p>
<ol>
<li><strong>toString()</strong> : 转换为字符串</li>
<li><strong>String() 强制转换</strong> : 转换为字符串</li>
<li><strong>加号拼接字符串</strong> : 和字符串拼接的内容结果都是字符串</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,被数值转换为字符串类型</span></span><br><span class="line"><span class="comment">// 方式1: 变量.toString()</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> res = num.toString();</span><br><span class="line"><span class="built_in">console</span>.log(res);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res);</span><br><span class="line"><span class="comment">//方式2: String(变量)</span></span><br><span class="line"><span class="keyword">var</span> res2 = <span class="built_in">String</span>(num);</span><br><span class="line"><span class="built_in">console</span>.log(res2);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res2);</span><br><span class="line"><span class="comment">//方式3: 通过字符串的拼接</span></span><br><span class="line"><span class="keyword">var</span> res3 = num+<span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(res3);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res3);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025093016588.png" alt="image-20211025093016588" style="zoom:80%;border: solid" />    





<h2 id="7-2-转换-number"><a href="#7-2-转换-number" class="headerlink" title="7,2 转换 number"></a>7,2 转换 number</h2><p><strong>方式 :</strong></p>
<ol>
<li><strong>parseInt(string)</strong> : 将 string 转换为整数类型</li>
<li><strong>parseFloat(string)</strong> : 将string转化为小数类型</li>
<li><strong>Number(string)</strong> : 将 string 强制转换为数字类型</li>
<li><strong>js 隐式转换 * / - %</strong> : 利用算数运算符装换为数值类型</li>
</ol>
<blockquote>
<p>parseInt 和 parseFloat</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个字符串类型的变量</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;123&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> n1 = <span class="built_in">parseInt</span>(str);</span><br><span class="line"><span class="built_in">console</span>.log(n1);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> n1);</span><br><span class="line"><span class="keyword">var</span> n2 = <span class="built_in">parseFloat</span>(<span class="string">&#x27;10.24&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(n2);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> n2);</span><br><span class="line"><span class="comment">// 注意:如果使用parseInt转换小数,将会丢失小数部分的数据,进行取整</span></span><br><span class="line"><span class="keyword">var</span> n3 = <span class="built_in">parseInt</span>(<span class="string">&#x27;12.55&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(n3);</span><br><span class="line"><span class="comment">// 如果接收的数据有单位,会将单位忽略</span></span><br><span class="line"><span class="comment">// 原理: 以数字开头的将识别为数字,忽略多余的部分</span></span><br><span class="line"><span class="keyword">var</span> n4 = <span class="built_in">parseInt</span>(<span class="string">&#x27;500px&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(n4);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&#x27;aa200px&#x27;</span>));<span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">parseInt</span>(<span class="string">&#x27;125aa34bb&#x27;</span>));<span class="comment">// 125</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025095254699.png" alt="image-20211025095254699" style="zoom: 50%;border: solid" />    



<blockquote>
<p>Number 和 JS隐式转换</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 Number()</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;456&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> n5 = <span class="built_in">Number</span>(str);</span><br><span class="line"><span class="built_in">console</span>.log(n5);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> n5);</span><br><span class="line"><span class="comment">// 通过JS 的隐式装换</span></span><br><span class="line"><span class="keyword">var</span> jian = <span class="string">&#x27;100&#x27;</span> - <span class="number">0</span>;</span><br><span class="line"><span class="built_in">console</span>.log(jian);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> jian);</span><br><span class="line"><span class="keyword">var</span> cheng = <span class="string">&#x27;100&#x27;</span> * <span class="number">1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(cheng);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> cheng);</span><br><span class="line"><span class="keyword">var</span> div = <span class="string">&#x27;100&#x27;</span> / <span class="number">3</span>;</span><br><span class="line"><span class="built_in">console</span>.log(div);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> div);</span><br><span class="line"><span class="keyword">var</span> mod = <span class="string">&#x27;100&#x27;</span> % <span class="number">3</span>;</span><br><span class="line"><span class="built_in">console</span>.log(mod);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> mod);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025100355755.png" alt="image-20211025100355755" style="zoom:50%;border: solid" />    



<blockquote>
<p><strong>数字内容的字符串进行计算</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明两个数字内容的字符串变量</span></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">&#x27;100&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&#x27;80&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> res1 = str1 - str2;</span><br><span class="line"><span class="built_in">console</span>.log(res1);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res1);</span><br><span class="line"><span class="keyword">var</span> res2 = str1 * str2;</span><br><span class="line"><span class="built_in">console</span>.log(res2);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res2);</span><br><span class="line"><span class="keyword">var</span> res3 = str1 / str2;</span><br><span class="line"><span class="built_in">console</span>.log(res3);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> res3);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025101159337.png" alt="image-20211025101159337" style="zoom:67%;border: solid" />    



<ul>
<li>案例 :</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	案例: 计算用户的年龄</span></span><br><span class="line"><span class="comment">	用户输入出生的年份,通过JS计算用户的年龄</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> birthYear = prompt(<span class="string">&#x27;请输入您的出生年份:&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> thisYear = <span class="number">2021</span>;</span><br><span class="line"><span class="keyword">var</span> age = thisYear - birthYear;</span><br><span class="line">alert(<span class="string">&#x27;原来你今年&#x27;</span> + age + <span class="string">&quot;岁了&quot;</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	案例: 用户输入两个数字</span></span><br><span class="line"><span class="comment">	进行加法计算,获得程序运行的结果,通过提示框反馈</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="built_in">parseInt</span>(prompt(<span class="string">&#x27;请输入第一个数字&#x27;</span>));</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="built_in">parseInt</span>(prompt(<span class="string">&#x27;请输入第二个数字&#x27;</span>));</span><br><span class="line">alert(<span class="string">&#x27;二者想加结果:&#x27;</span> + (num1 + num2));</span><br></pre></td></tr></table></figure>



<h1 id="7-3-转换-boolean"><a href="#7-3-转换-boolean" class="headerlink" title="7,3 转换 boolean"></a>7,3 转换 boolean</h1><p><strong>Boolean()</strong> : 将其他类型的数据转换为布尔类型</p>
<p><strong>特点 :</strong></p>
<ul>
<li>代表 空 , 有否定意味的都会被转换为 false , 比如 : NaN , null , undefined , 0</li>
<li>其余的值都是true</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;-------------转换布尔类型-------------&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">null</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="number">0</span>));	</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">undefined</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">NaN</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;true&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="number">123</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;小白&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">&#x27;false&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025103046297.png" alt="image-20211025103046297" style="zoom:50%;border: solid" />    



<h1 id="8-解释型语言和编译型的语言"><a href="#8-解释型语言和编译型的语言" class="headerlink" title="8, 解释型语言和编译型的语言"></a>8, 解释型语言和编译型的语言</h1><p>计算机不能直接理解除机器语言 ( 二进制 ) 之外的语言 , 所以必须将开发者所编写的程序语言翻译成机器语言计算机才能执行程序 , 将程序语言翻译成机器语言的工具 , 就是翻译器</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025134754967.png" alt="image-20211025134754967">    </p>
<ul>
<li><p>翻译器翻译的方式有两种 , 一种是<strong>编译</strong> , 一种是<strong>解释</strong> , 区别在于翻译的时间点不同</p>
</li>
<li><p>编译 <strong>是在代码执行之前进行</strong>的 , 生成中间的代码文件</p>
<p>.java —&gt; .class —-&gt; jvm运行</p>
</li>
<li><p>解释 <strong>是在代码运行的时候及时进行解释</strong> , 并且立即执行 ( 当编译器以解释方式运行的时候 , 有称作为解释器 )</p>
</li>
</ul>
<h1 id="9-JS运算符"><a href="#9-JS运算符" class="headerlink" title="9, JS运算符"></a>9, JS运算符</h1><ul>
<li>算数运算符</li>
<li>递增和递减</li>
<li>比较运算符</li>
<li>逻辑远算符</li>
<li>赋值运算符</li>
</ul>
<h2 id="9-1-算数运算符"><a href="#9-1-算数运算符" class="headerlink" title="9,1 算数运算符"></a>9,1 算数运算符</h2><p><strong>+ - * / %</strong></p>
<ul>
<li>浮点数 (小数)  运算时的问题</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0.1</span> + <span class="number">0.2</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0.07</span> * <span class="number">100</span>);</span><br><span class="line"><span class="comment">// 注意:最好不要使用浮点数直接比较</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0.07</span> * <span class="number">100</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num == <span class="number">7</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025135836342.png" alt="image-20211025135836342" style="zoom:67%;border: solid" />    



<h2 id="9-2-递增-减运算符"><a href="#9-2-递增-减运算符" class="headerlink" title="9,2 递增,减运算符"></a>9,2 递增,减运算符</h2><p>如果需要改数字进行反复的 +1 或者 -1 的操作可以使用 <strong>递增(++)</strong> 和 <strong>递减(–)</strong> 的操作运算符完成</p>
<p>这两个运算符可以出现在变量的前面 , 也可以出现在变量的后面</p>
<p>前面的 : 前置递增(减)</p>
<p>后面的 : 后置递增(减)</p>
<p><strong>注意 : 递增和递减必须和变量的搭配使用</strong></p>
<ul>
<li>前置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 递增:++</span></span><br><span class="line"><span class="comment">// 前置</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">++ num;<span class="comment">// 相当于num = num + 1;</span></span><br><span class="line"><span class="built_in">console</span>.log(num);</span><br><span class="line"><span class="keyword">var</span> v = <span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(++v + <span class="number">100</span>);<span class="comment">// 111</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025141027731.png" alt="image-20211025141027731">    </p>
<p>运算的准则 : 先进行+1的操作 , 然后返回值 , 简称==先加后用==</p>
<ul>
<li>后置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> res = <span class="number">10</span>;</span><br><span class="line">res ++;<span class="comment">//res = res + 1;</span></span><br><span class="line"><span class="built_in">console</span>.log(res);</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a++ + <span class="number">100</span>);<span class="comment">// 110</span></span><br><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">// 11</span></span><br></pre></td></tr></table></figure>

<p>运算准则 : 先返回值 , 后进行+1的操作 , 简称==先用后加==</p>
<p>在实际开发中 , 递增和递减 , 往往都是独占一行</p>
<h2 id="9-3-比较运算符"><a href="#9-3-比较运算符" class="headerlink" title="9,3 比较运算符"></a>9,3 比较运算符</h2><p>当两个数值进行比较运算后 , 返回的结果是一个布尔值 (true / false)</p>
<ul>
<li> &gt; : 大于</li>
<li> &lt; : 小于</li>
<li> &gt;= : 大于等于</li>
<li> &lt;= : 小于等于</li>
<li> == : 判等号 , 会进行数据类型的转换 , 单纯的比较数值</li>
<li> != : 不等号 , 会进行数据类型的转换 , 单纯的比较数值</li>
<li> === : 全等 , 要求数值和数据类型必须完全一致</li>
<li> !== : 不全等 , 要求数值和数据类型必须不一致</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;===========比较远算符===========&#x27;</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span> &gt; <span class="number">5</span>);<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span> &lt; <span class="string">&#x27;5&#x27;</span>);<span class="comment">// 触发了隐式转换</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">5</span> &lt;= <span class="string">&#x27;10&#x27;</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// 在程序中判断数值是否相等使用 : ==</span></span><br><span class="line"><span class="comment">// 会默认进行数据类型的转换</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;10&#x27;</span>);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;张三&#x27;</span> == <span class="string">&#x27;李四&#x27;</span>);<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> == <span class="literal">false</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// 全等,不仅仅是数值相等,而且数据类型也要相等</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> === <span class="number">10</span>);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> === <span class="string">&#x27;10&#x27;</span>);<span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025142601838.png" alt="image-20211025142601838" style="zoom:50%;border: solid" />    

<p><strong>简答题 : = ,== ,=== 有和不同之处</strong></p>
<p> = 是赋值号 , 把右侧的数值保存到 = 左侧的变量中</p>
<p>== 是判等号 , 判断左右两侧的数值是否相等 , 不在乎数据类型 , 单纯的比价数值</p>
<p>=== 是全等好 , 判断左右两侧数值和数据类型是否相等</p>
<h2 id="9-4-逻辑运算符"><a href="#9-4-逻辑运算符" class="headerlink" title="9,4 逻辑运算符"></a>9,4 逻辑运算符</h2><p>逻辑运算符是用来对布尔值进行运算的 , 返回一个布尔值 , 这种运算符在条件判断中被大量的使用</p>
<ul>
<li>&amp;&amp; : 逻辑与 , 简称 “与” , and </li>
<li>|| : 逻辑或 , 简称 “或” , or</li>
<li>! : 逻辑非 , 简称 “非” , not</li>
</ul>
<blockquote>
<p>逻辑与</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 逻辑与</span></span><br><span class="line"><span class="comment">// true &amp;&amp; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;10&#x27;</span> &amp;&amp; <span class="number">3</span> &lt; <span class="number">5</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// true &amp;&amp; false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;10&#x27;</span> &amp;&amp; <span class="number">3</span> &gt; <span class="number">5</span>);<span class="comment">// false</span></span><br><span class="line"><span class="comment">// false &amp;&amp; true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;100&#x27;</span> &amp;&amp; <span class="number">3</span> &lt; <span class="number">5</span>);<span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<p>运算符两侧的表达式都是 true 的情况下 , 结果才会是 true , 只要有一处为false , 结果就是 false</p>
<blockquote>
<p>逻辑或</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 逻辑或</span></span><br><span class="line"><span class="comment">// true || true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;10&#x27;</span> || <span class="number">3</span> &lt; <span class="number">5</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// true || false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;10&#x27;</span> || <span class="number">3</span> &gt; <span class="number">5</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// false || true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;100&#x27;</span> || <span class="number">3</span> &lt; <span class="number">5</span>);<span class="comment">// true</span></span><br><span class="line"><span class="comment">// false || false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">10</span> == <span class="string">&#x27;100&#x27;</span> || <span class="number">3</span> &gt; <span class="number">5</span>);<span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<p>运算符两侧的表达式都是 false 的情况下 , 结果才会是 false , 只要有一处为true , 结果就是 true</p>
<blockquote>
<p>逻辑非</p>
</blockquote>
<p>也被称作为 <strong>取反符</strong> , 用来去和一个布尔值相反的值 , 如果是 true 结果就是 false</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 逻辑非</span></span><br><span class="line"><span class="built_in">console</span>.log(!<span class="literal">true</span>); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(!<span class="literal">false</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h2 id="9-5-短路运算-逻辑中断"><a href="#9-5-短路运算-逻辑中断" class="headerlink" title="9,5 短路运算 (逻辑中断)"></a>9,5 短路运算 (逻辑中断)</h2><p><strong>短路运算的原理 :</strong></p>
<p>当有多个表达式的时候 , 左侧表达式可以直接确定结果的时候 , 就不在继续运算右侧的表达式了</p>
<ul>
<li>逻辑与</li>
</ul>
<ol>
<li>如果表达式1的结果为 true , 返回表达式2的结果</li>
<li>如果表达式1的结果为false , 返回表达式1的结果</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//逻辑与的短路运算</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">123</span> &amp;&amp; <span class="number">456</span>);<span class="comment">// 456</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> &amp;&amp; <span class="number">456</span>);<span class="comment">// 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> &amp;&amp; <span class="number">456</span> + <span class="number">7</span> * <span class="number">89</span>);<span class="comment">// 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;Dog&#x27;</span> &amp;&amp; <span class="string">&#x27;Cat&#x27;</span>);<span class="comment">// Cat</span></span><br></pre></td></tr></table></figure>



<ul>
<li>逻辑或</li>
</ul>
<ol>
<li>如果表达式1的结果为 true , 返回表达式1的结果</li>
<li>如果表达式1的结果为false , 返回表达式2的结果</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//逻辑或的短路运算</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">123</span> || <span class="number">456</span>);<span class="comment">// 123</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> || <span class="number">456</span>);<span class="comment">// 456</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> || <span class="number">456</span> + <span class="number">7</span> * <span class="number">89</span>);<span class="comment">// 1079</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;Dog&#x27;</span> || <span class="string">&#x27;Cat&#x27;</span>);<span class="comment">// &#x27;Dog&#x27;</span></span><br></pre></td></tr></table></figure>



<h2 id="9-6-赋值运算符"><a href="#9-6-赋值运算符" class="headerlink" title="9,6 赋值运算符"></a>9,6 赋值运算符</h2><ul>
<li>=</li>
<li>+=  , -=</li>
<li>*= , /= , %=</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> jia = <span class="number">10</span>;</span><br><span class="line">jia += <span class="number">5</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;+=后的数值:&#x27;</span> + jia);</span><br><span class="line"><span class="keyword">var</span> div = <span class="number">10</span>; </span><br><span class="line">div /= <span class="number">2</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;/=后的数值:&#x27;</span> + div);</span><br><span class="line"><span class="keyword">var</span> mod = <span class="number">10</span>;</span><br><span class="line">mod %= <span class="number">3</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;%=后的结果&#x27;</span> + mod);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025151401749.png" alt="image-20211025151401749" style="zoom:80%;border: solid" />    



<h2 id="9-7-优先级"><a href="#9-7-优先级" class="headerlink" title="9,7 优先级"></a>9,7 优先级</h2><table>
<thead>
<tr>
<th>优先级</th>
<th>运算符</th>
<th>顺序</th>
</tr>
</thead>
<tbody><tr>
<td>1</td>
<td>()</td>
<td>所有的表达式优先计算()中的内容</td>
</tr>
<tr>
<td>2</td>
<td>一元运算</td>
<td>++ , – , ==! (最高的)==</td>
</tr>
<tr>
<td>3</td>
<td>算数运算</td>
<td>先 * / % , 后 + -</td>
</tr>
<tr>
<td>4</td>
<td>关系运算</td>
<td>&gt; , &gt;= , &lt; , &lt;=</td>
</tr>
<tr>
<td>5</td>
<td>相等运算</td>
<td>== , != , === , !===</td>
</tr>
<tr>
<td>6</td>
<td>逻辑运算</td>
<td>==先 &amp;&amp; , 后 ||==</td>
</tr>
<tr>
<td>7</td>
<td>赋值运算</td>
<td>=</td>
</tr>
<tr>
<td>8</td>
<td>逗号运算</td>
<td>,</td>
</tr>
</tbody></table>
<h1 id="10-流程控制"><a href="#10-流程控制" class="headerlink" title="10, 流程控制"></a>10, 流程控制</h1><p>在程序中 , 各个代码的执行顺序对程序的结果有着直接的影响 , 很多情况下我们要控制代码的执行顺序来实现我们要完成的功能</p>
<p>简单的理解 : ==流程控制就是来控制我们的代码按照什么结构顺序来执行==</p>
<p>流程控制分为三种结构</p>
<ul>
<li>顺序结构</li>
<li>分支结构</li>
<li>循环结构</li>
</ul>
<h2 id="10-1-顺序结构"><a href="#10-1-顺序结构" class="headerlink" title="10,1 顺序结构"></a>10,1 顺序结构</h2><p>程序中最基本的流程控制 , 没有特定的语法 , 程序会按照 <strong>代码的先后顺序 , 一次执行 , 程序中大多是代码是这样执行的</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025152924148.png" alt="image-20211025152924148" style="zoom:50%;border: solid" />    

<h2 id="10-2-分支结构"><a href="#10-2-分支结构" class="headerlink" title="10,2 分支结构"></a>10,2 分支结构</h2><p>根据不同的条件 , 执行不同的代码路径 ( 执行代码多选一 ) , 从而获得不同的结果</p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025153119607.png" alt="image-20211025153119607" style="zoom:50%;border: solid" />    

<ul>
<li>if else 语句</li>
<li>switch case 语句</li>
</ul>
<h2 id="10-3-if-语句"><a href="#10-3-if-语句" class="headerlink" title="10,3 if 语句"></a>10,3 if 语句</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件判断) &#123;</span><br><span class="line">	<span class="comment">// 代码   </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>执行思路 : 条件判断结果为真 , 执行 {} 中的代码 , 反之忽略 {} 中的代码 , 继续向下执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="number">3</span> &lt; <span class="number">5</span>) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;if&#123;&#125;中的代码被执行了...&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025154803534.png" alt="image-20211025154803534" style="zoom:60%;border: solid" />    



<h2 id="10-4-if-else-双分支"><a href="#10-4-if-else-双分支" class="headerlink" title="10,4 if else 双分支"></a>10,4 if else 双分支</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件判断) &#123;</span><br><span class="line">   </span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>执行思路 : 条件判断结果为true , 指定if {} 中的代码 , 反之执行 else 中的代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	案例: 看电影</span></span><br><span class="line"><span class="comment">	用户根据提示信息输入自己的年龄</span></span><br><span class="line"><span class="comment">	如果18岁以下,提示请在父母的陪同下观看</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> age = prompt(<span class="string">&#x27;请输入您的年龄&#x27;</span>);</span><br><span class="line"><span class="keyword">if</span>(age &lt; <span class="number">18</span>) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;请在父母的陪同下观看....&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    alert(<span class="string">&#x27;你可以独自观看....&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>案例 : </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	案例: 用户登录</span></span><br><span class="line"><span class="comment">	规定用户的账号:&#x27;zhangsan@123&#x27;;</span></span><br><span class="line"><span class="comment">	用户的密码:zs123456</span></span><br><span class="line"><span class="comment">	只有在账号和密码完全一致的情况下提示用户登录成功</span></span><br><span class="line"><span class="comment">	反之,提示账号或密码错误,账号和密码不可为空</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> username = <span class="string">&#x27;zhangsan@123&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> password = <span class="string">&#x27;zs123456&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str1 = prompt(<span class="string">&#x27;请输入账号:&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> str2 = prompt(<span class="string">&#x27;请输入密码:&#x27;</span>);</span><br><span class="line"><span class="keyword">if</span>(str1 == <span class="string">&#x27;&#x27;</span> || str2 == <span class="string">&#x27;&#x27;</span> ) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;账号或密码不可为空&#x27;</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">if</span>(str1 == username &amp;&amp; str2 == password) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;登录成功!!!&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        alert(<span class="string">&#x27;账号或密码错误,登录失败!!!&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li><p>案例 : 判断平闰年</p>
<p>接收用户输入的年份</p>
<p>能被4整除的且不能整除100为闰年 , 或者能被400整出就是闰年</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> year = prompt(<span class="string">&#x27;请输入年份&#x27;</span>);</span><br><span class="line"><span class="comment">// 1,符合整除400</span></span><br><span class="line"><span class="keyword">var</span> flag1 = year % <span class="number">400</span> == <span class="number">0</span>;</span><br><span class="line"><span class="comment">// 2,可以整除4</span></span><br><span class="line"><span class="keyword">var</span> flag2 = year % <span class="number">4</span> == <span class="number">0</span>;</span><br><span class="line"><span class="comment">// 3,但是不能整出100</span></span><br><span class="line"><span class="keyword">var</span> flag3 = year % <span class="number">100</span> != <span class="number">0</span>;</span><br><span class="line"><span class="keyword">if</span>(flag1 || flag2 &amp;&amp; flag3) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;您输入的&#x27;</span> + year + <span class="string">&#x27;年,是闰年&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    alert(<span class="string">&#x27;您输入的&#x27;</span> + year + <span class="string">&#x27;年,是平年&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="10-5-if-else-if-多分支"><a href="#10-5-if-else-if-多分支" class="headerlink" title="10,5 if else if 多分支"></a>10,5 if else if 多分支</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (条件判断<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="comment">// 执行语句1</span></span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span>(条件判断<span class="number">2</span>) &#123;</span><br><span class="line">    <span class="comment">// 执行语句2</span></span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span>(条件判断<span class="number">3</span>) &#123;</span><br><span class="line">    <span class="comment">// 执行语句3</span></span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 上述条件都不成立,执行语句4</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>注意 :</strong></p>
<ul>
<li>多分支语句虽然有很多个但是只会执行一个条件中的语句</li>
<li>else if 可以有多个</li>
<li>else 和 if 之间有空格</li>
</ul>
<p><strong>案例 : 判断成绩</strong></p>
<ol>
<li>90分 (含) 以上 , 输出优秀</li>
<li>80分 (含) ~ 90分 (不含) , 输出良好</li>
<li>60分 (含) ~ 80分 (不含) , 输出及格</li>
<li>0分 (含) ~ 60分 (不含) , 输出不及格</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> score = prompt(<span class="string">&#x27;请输入您这次考试的成绩&#x27;</span>);</span><br><span class="line"><span class="comment">// 1,90分 (含) 以上 , 输出优秀</span></span><br><span class="line"><span class="keyword">if</span>(score &gt;= <span class="number">90</span>) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;优秀,考的不错,继续保持&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (score &gt;= <span class="number">80</span>) &#123;</span><br><span class="line">    <span class="comment">// 2, 80分 (含) ~ 90分 (不含) , 输出良好 </span></span><br><span class="line">    alert(<span class="string">&#x27;良好,还不错&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span>(score &gt;= <span class="number">60</span>) &#123;</span><br><span class="line">    <span class="comment">// 3,60分 (含) ~ 80分 (不含) , 输出及格</span></span><br><span class="line">    alert(<span class="string">&#x27;不多不少,及格万岁&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// 4,0分 (含) ~ 60分 (不含) , 输出不及格</span></span><br><span class="line">    alert(<span class="string">&#x27;请你把卷子抄写50遍, :-)&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h2 id="10-6-三元表达式"><a href="#10-6-三元表达式" class="headerlink" title="10,6 三元表达式"></a>10,6 三元表达式</h2><p>三元运算是由 3 个表达式组成</p>
<p>语法  : <strong>==表达式1 ? 表达式2 : 表达式3;==</strong></p>
<p>如果表达式1 结果为 true , 三元运算返回表达式2 的结果</p>
<p>反之 , 返回表达式3的结果</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 三元运算</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="comment">// 1,当表达式1结果为true</span></span><br><span class="line"><span class="keyword">var</span> res1 = num &gt; <span class="number">5</span> ? <span class="string">&#x27;真的&#x27;</span> : <span class="string">&#x27;假的&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(res1);</span><br><span class="line"><span class="comment">// 1,当表达式1结果为false</span></span><br><span class="line"><span class="keyword">var</span> res2 = num &gt; <span class="number">20</span> ? <span class="string">&#x27;真的&#x27;</span> : <span class="string">&#x27;假的&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(res2);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211025170136727.png" alt="image-20211025170136727">    </p>
<p>==三元运算类似于 if else 语句 , 可以理解为 if else 的简化版==</p>
<h2 id="10-7-分支语句-switch-case"><a href="#10-7-分支语句-switch-case" class="headerlink" title="10,7 分支语句 switch case"></a>10,7 分支语句 switch case</h2><p>作用 : <strong>基于不同的条件来执行不同的代码 , 当要针对变量设置一系列特定的值的时候 , 就可以使用 switch</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span>(表达式) &#123;</span><br><span class="line">    <span class="keyword">case</span> 值<span class="number">1</span>:</span><br><span class="line">        <span class="comment">//执行语句1</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> 值<span class="number">2</span>:</span><br><span class="line">        <span class="comment">//执行语句2</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">default</span>:</span><br><span class="line">        <span class="comment">//如果表达式的值都不符合</span></span><br><span class="line">        <span class="comment">//最终会执行default这个分支下的语句</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>**switch 使用时的注意点 **</p>
<ol>
<li>在实际开发中 switch() 中写的是变量</li>
<li>() 中的值 和 case 中的值<strong>全等</strong> , 数值和类型完全一致</li>
<li>每个 switch 中的 case 后面加上 break , 如果不加则不会退出 switch , 会出现<strong>自由下落</strong></li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 需求:根据用户输入的月份,判断该月所属季节</span></span><br><span class="line"><span class="comment">// 3~5:春季</span></span><br><span class="line"><span class="comment">// 6~8:夏季</span></span><br><span class="line"><span class="comment">// 9~11:秋季</span></span><br><span class="line"><span class="comment">// 12~2:冬季</span></span><br><span class="line"><span class="comment">// 要求使用 switch</span></span><br><span class="line"><span class="keyword">var</span> month = <span class="built_in">parseInt</span>(prompt(<span class="string">&#x27;请输入月份&#x27;</span>));</span><br><span class="line"><span class="keyword">switch</span>(month) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">        alert(<span class="string">&#x27;春季&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">6</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">7</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">8</span>:</span><br><span class="line">        alert(<span class="string">&#x27;夏季&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">9</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">10</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">11</span>:</span><br><span class="line">        alert(<span class="string">&#x27;秋季&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">12</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        alert(<span class="string">&#x27;冬季&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="10-8-switch-和-if-else-if-的区别"><a href="#10-8-switch-和-if-else-if-的区别" class="headerlink" title="10,8 switch 和 if else if 的区别"></a>10,8 switch 和 if else if 的区别</h2><ol>
<li><strong>switch case</strong> 通常在有固定的值得情况下使用</li>
<li><strong>if else if</strong> 通常在明确了数据范围的情况下使用 , 相对比较灵活</li>
<li><strong>switch case</strong> 进行条件判断后会直接执行程序中的 <strong>case</strong> 后的语句 , 效率很高</li>
<li><strong>if else if</strong> 有多个判断条件 , 需要进行多次判断 , 效率比较慢的</li>
</ol>
<h1 id="11-JavaScript流程控制之循环"><a href="#11-JavaScript流程控制之循环" class="headerlink" title="11, JavaScript流程控制之循环"></a>11, JavaScript流程控制之循环</h1><p>JS 中循环分为三种</p>
<ul>
<li>for</li>
<li>while</li>
<li>do while</li>
</ul>
<p><strong>循环的组成部分</strong></p>
<p>在程序中重复执行的代码称为 <strong>循环体</strong> , 循环体是否能够正常的执行循环的操作 , 取决于 <strong>循环的条件判断</strong></p>
<p>由 <strong>循环体</strong> 和 <strong>循环条件</strong> 组成的语句就是循环语句</p>
<h2 id="11-1-for"><a href="#11-1-for" class="headerlink" title="11,1 for"></a>11,1 for</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化变量;判断条件;操作表达式) &#123;</span><br><span class="line">    <span class="comment">// 循环体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol>
<li>初始化变量: 使用 var 声明一个普通的变量 , 用作计数器</li>
<li>判断条件 : 用来决定这一次循环是否执行</li>
<li>操作表达式 : 每一次循环最后一次执行的代码 , 通常是用来对计数器进行更新操作 (自增 , 自减)</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 用户输入的循环的次数</span></span><br><span class="line"><span class="keyword">var</span> count = <span class="built_in">parseInt</span>(prompt(<span class="string">&#x27;请输入循环的次数&#x27;</span>));</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= count; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;第&#x27;</span> + i + <span class="string">&#x27;次循环执行了....&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	有一只猴,每天吃掉桃子总数的一半,把剩的一半中的一个坏的扔掉,第7天的时候,</span></span><br><span class="line"><span class="comment">	就剩一个桃了,问最开始桃一共有几个</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> peach = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span><br><span class="line">    peach = (peach + <span class="number">1</span>) * <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;最开始一共有&#x27;</span> + peach + <span class="string">&#x27;个桃子&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026093705058.png" alt="image-20211026093705058">    </p>
<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	100购物卡,洗发水(15),香皂(2),牙刷(5)</span></span><br><span class="line"><span class="comment">	希望将100元正好花完</span></span><br><span class="line"><span class="comment">	购买这三种商品有多少组合方式</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="comment">// 100元可以买6瓶洗发水</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> a = <span class="number">1</span>; a &lt;= <span class="number">6</span>; a++) &#123;</span><br><span class="line">    <span class="comment">// 100元可以买50块香皂</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> b = <span class="number">1</span>; b &lt;= <span class="number">50</span>; b++) &#123;</span><br><span class="line">        <span class="comment">// 100元可以买20个牙刷</span></span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> c = <span class="number">1</span>; c &lt;= <span class="number">20</span>; c++) &#123;</span><br><span class="line">            <span class="keyword">if</span>(<span class="number">15</span> * a + <span class="number">2</span> * b + <span class="number">5</span> * c == <span class="number">100</span>) &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">&#x27;洗发水:&#x27;</span> + a + <span class="string">&#x27;,香皂:&#x27;</span> + b + <span class="string">&#x27;,牙刷:&#x27;</span> + c)</span><br><span class="line">                count++;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;一共有&#x27;</span> + count + <span class="string">&#x27;种组合方式&#x27;</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026093744539.png" alt="image-20211026093744539" style="zoom:50%;border: solid" />    



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	第一个月的时候,在院里养了一只兔子,</span></span><br><span class="line"><span class="comment">	第二个月的时候,又来了一只兔子</span></span><br><span class="line"><span class="comment">	第三个月的时候,院里一共是2只兔子</span></span><br><span class="line"><span class="comment">	第四个月的时候,生了一只兔子,院里有3只兔子</span></span><br><span class="line"><span class="comment">	规律:</span></span><br><span class="line"><span class="comment">	1,1,2,3,5,8,13,21</span></span><br><span class="line"><span class="comment">	问第12个月一共几只兔子</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">1</span>;<span class="comment">//代表上个月兔子的总数</span></span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">1</span>;<span class="comment">//代表一个月中兔子的总数</span></span><br><span class="line"><span class="keyword">var</span> sum;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">10</span>; i++) &#123;</span><br><span class="line">    sum = num2;<span class="comment">//获得这个月兔子的总数</span></span><br><span class="line">    num2 += num1;<span class="comment">//计算当月兔子的数量</span></span><br><span class="line">    num1 = sum;<span class="comment">//将上个月兔子的数量更新</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(num2);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026101046170.png" alt="image-20211026101046170" style="zoom:50%;" />    



<p>**案例 : **</p>
<p>1, 打印一排图案 😍 6个</p>
<p>2, 将这一排图案打印6行</p>
<p>😍😍😍😍😍😍</p>
<p>😍😍😍😍😍😍</p>
<p>😍😍😍😍😍😍</p>
<p>😍😍😍😍😍😍</p>
<p>😍😍😍😍😍😍</p>
<p>😍😍😍😍😍😍</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s1 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span><br><span class="line">    s1 += <span class="string">&#x27;😍&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(s1);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> s2 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="comment">//让以上的内容在进行6次循环</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">1</span>; j &lt;= <span class="number">6</span>; j++) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span><br><span class="line">        s2 += <span class="string">&#x27;😍&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    s2 += <span class="string">&#x27;\n&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(s2);</span><br></pre></td></tr></table></figure>



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s3 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">6</span>; j &gt;= i; j--) &#123;</span><br><span class="line">        s3 += <span class="string">&#x27;😍&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    s3 += <span class="string">&#x27;\n&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(s3);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026135946532.png" alt="image-20211026135946532">    </p>
<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s4 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">6</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> k = <span class="number">1</span>; k &lt; i; k++) &#123;</span><br><span class="line">        s4 += <span class="string">&#x27;🤢&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">6</span>; j &gt;= i; j--) &#123;</span><br><span class="line">        s4 += <span class="string">&#x27;😍&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    s4 += <span class="string">&#x27;\n&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(s4);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026140009277.png" alt="image-20211026140009277">    </p>
<p><strong>案例 :  99乘法表</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026140122631.png" alt="image-20211026140122631" style="zoom:50%;border: solid" />    

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> s5 = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">9</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">1</span>; j &lt;= i; j++) &#123;</span><br><span class="line">        s5 += j + <span class="string">&#x27;×&#x27;</span> + i + <span class="string">&#x27;=&#x27;</span> + j * i + <span class="string">&#x27;\t&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    s5 += <span class="string">&#x27;\n&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(s5);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026141250019.png" alt="image-20211026141250019" style="zoom:50%;border: solid" />    



<h2 id="11-2-while"><a href="#11-2-while" class="headerlink" title="11,2 while"></a>11,2 while</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">while</span>(循环条件/表达式) &#123;</span><br><span class="line">	<span class="comment">//循环体      </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用while循环在控制台输出15次,Hello,World!!</span></span><br><span class="line"><span class="comment">// 1,声明变量,当做计数器使用</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"><span class="comment">// 2,开始循环,指定条件判断</span></span><br><span class="line"><span class="keyword">while</span>(i &lt;= <span class="number">15</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;第&#x27;</span> + i + <span class="string">&#x27;次Hello,World!!&#x27;</span>);</span><br><span class="line">    <span class="comment">//3,操作表达式,完成计数器的跟新,防止死循环</span></span><br><span class="line">    i++;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026142155672.png" alt="image-20211026142155672" style="zoom: 50%;border: solid" />    



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	用户输入一个数字,求1~这个数值之间整数的和</span></span><br><span class="line"><span class="comment">	用户如果输入小数,按整数处理</span></span><br><span class="line"><span class="comment">	13.5 ==&gt; 13</span></span><br><span class="line"><span class="comment">	将结果在警告框中显示出来</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> num = prompt(<span class="string">&#x27;请输入一个数字&#x27;</span>),</span><br><span class="line">    sum = <span class="number">0</span>,</span><br><span class="line">    i = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">while</span>(i &lt;= num) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">    i++;</span><br><span class="line">&#125;</span><br><span class="line">alert(<span class="string">&#x27;1~&#x27;</span> + num + <span class="string">&#x27;之间整数之和为:&#x27;</span> + sum);</span><br></pre></td></tr></table></figure>



<h2 id="11-3-do-while"><a href="#11-3-do-while" class="headerlink" title="11,3 do while"></a>11,3 do while</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span>&#123;</span><br><span class="line">    <span class="comment">//循环体</span></span><br><span class="line">&#125;<span class="keyword">while</span>(循环条件);</span><br></pre></td></tr></table></figure>

<p>不管什么情况 <strong>do while</strong> 都会先执行一次 , 然后在对表达式进行判断 , 如果结果为 true 执行循环体 , 反之不执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,声明一个计数器</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;循环第&#x27;</span> + num + <span class="string">&#x27;次&#x27;</span>);</span><br><span class="line">    <span class="comment">// 2,操作表达式</span></span><br><span class="line">    num ++;</span><br><span class="line">&#125; <span class="keyword">while</span> (<span class="literal">false</span>);<span class="comment">// 3,判断条件</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026144546945.png" alt="image-20211026144546945" style="zoom:50%;" />    

<p><strong>==注意 : do while 循环和其他的循环最大的不同之处在于 , 不管条件判断结果是真还是假都会执行一次循环==</strong></p>
<p><strong>案例 :</strong></p>
<p>Are U OK ! ? , 可以输入 Y 或 y , 程序结束 , 如果没有内容或者输入其他内容 , 一直询问</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    msg = prompt(<span class="string">&#x27;Are U OK !?&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">while</span> (msg !== <span class="string">&#x27;Y&#x27;</span> &amp;&amp; msg !== <span class="string">&#x27;y&#x27;</span>);</span><br><span class="line">alert(<span class="string">&#x27;Well Done Brohter!!&#x27;</span>);</span><br></pre></td></tr></table></figure>



<h2 id="11-4-break-amp-continue"><a href="#11-4-break-amp-continue" class="headerlink" title="11,4 break &amp; continue"></a>11,4 break &amp; continue</h2><ul>
<li><strong>continue 用于跳出当次循环 , 直接进行下一次循环</strong></li>
</ul>
<p>跳 7 , 循环100次 , 遇到个位数是7 , 是7的倍数就要跳过</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">100</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span>(i % <span class="number">10</span> == <span class="number">7</span> || i % <span class="number">7</span> == <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">continue</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(i);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026150430251.png" alt="image-20211026150430251" style="zoom:40%;border: solid" />    



<ul>
<li><strong>break 作用是退出循环 , 直接结束</strong> </li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msg;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    msg = prompt(<span class="string">&#x27;Are U OK !?&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span>(msg === <span class="string">&#x27;Y&#x27;</span> || msg === <span class="string">&#x27;y&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125; <span class="keyword">while</span> (<span class="literal">true</span>);</span><br><span class="line">alert(<span class="string">&#x27;Well Done Brohter!!&#x27;</span>);</span><br></pre></td></tr></table></figure>



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	一个加油站92,95</span></span><br><span class="line"><span class="comment">	92每升7元</span></span><br><span class="line"><span class="comment">	95每升8元</span></span><br><span class="line"><span class="comment">	输入选择添加的油号</span></span><br><span class="line"><span class="comment">	输入用户添加多少钱的</span></span><br><span class="line"><span class="comment">	程序结束的时候提示 XX号汽油添加完毕,共计添加XX升</span></span><br><span class="line"><span class="comment">	如果用户在添加油号输入 &#x27;f&#x27; , 直接退出程序</span></span><br><span class="line"><span class="comment">	如果用在此处填写其他内容会一直提示输入</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> oilNum;</span><br><span class="line"><span class="keyword">var</span> money;</span><br><span class="line"><span class="keyword">do</span> &#123;</span><br><span class="line">    oilNum = prompt(<span class="string">&#x27;请输入添加的油号&#x27;</span>);</span><br><span class="line">    <span class="comment">//输入 &#x27;f&#x27; , 直接退出程序</span></span><br><span class="line">    <span class="keyword">if</span>(oilNum === <span class="string">&#x27;f&#x27;</span>) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;程序已退出!&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (oilNum === <span class="string">&#x27;92&#x27;</span> || oilNum === <span class="string">&#x27;95&#x27;</span>) &#123;</span><br><span class="line">        money = prompt(<span class="string">&#x27;请输入添加的金额&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125; <span class="keyword">while</span>(<span class="literal">true</span>);</span><br><span class="line"><span class="keyword">switch</span>(oilNum) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;92&#x27;</span>:</span><br><span class="line">        alert(<span class="string">&#x27;92号汽油添加了&#x27;</span> + money / <span class="number">7</span> + <span class="string">&#x27;升&#x27;</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&#x27;95&#x27;</span>:</span><br><span class="line">        alert(<span class="string">&#x27;95号汽油添加了&#x27;</span> + money / <span class="number">8</span> + <span class="string">&#x27;升&#x27;</span>)</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h1 id="12-JavaScript数组"><a href="#12-JavaScript数组" class="headerlink" title="12, JavaScript数组"></a>12, JavaScript数组</h1><p><strong>数组</strong> 是 <strong>数据的集合</strong> , 其中每一个数据被称作为元素 , 在 JS 数组中 <strong>可以存放任意类型的数据</strong> , 数组会将一组数据存储在一个变量名之下</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 普通的变量,一次只能存储一个值</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="comment">// 数组可以存储多个值</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>,<span class="number">40</span>];</span><br></pre></td></tr></table></figure>



<h2 id="12-1-数组的创建"><a href="#12-1-数组的创建" class="headerlink" title="12,1 数组的创建"></a>12,1 数组的创建</h2><ul>
<li><p><strong>两种</strong></p>
<ul>
<li>利用 new 关键字创建</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 利用new关键字创建数组</span></span><br><span class="line"><span class="comment">// 创建一个空数组</span></span><br><span class="line"><span class="keyword">var</span> arrA = <span class="keyword">new</span> <span class="built_in">Array</span>();</span><br><span class="line"><span class="comment">// 创建一个有元素的数组</span></span><br><span class="line"><span class="keyword">var</span> arrB = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&#x27;张三&#x27;</span>,<span class="number">28</span>,<span class="literal">true</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arrA);</span><br><span class="line"><span class="built_in">console</span>.log(arrB);</span><br></pre></td></tr></table></figure>

<ul>
<li>利用字面量 ( 在实际开发中最常用的 )</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过字面量来创建</span></span><br><span class="line"><span class="comment">// 创建一个空数组</span></span><br><span class="line"><span class="keyword">var</span> arrC = [];</span><br><span class="line"><span class="comment">// 使用字面量的方式创建带有初始值得数组</span></span><br><span class="line"><span class="keyword">var</span> arrD = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="number">30</span>,<span class="literal">true</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arrC);</span><br><span class="line"><span class="built_in">console</span>.log(arrD);</span><br></pre></td></tr></table></figure>

<p><strong>注意 : 直接声明数组的每个元素时 , 一定要用英文的逗号隔开 , 数组中可以是字符串 , 数值 , 布尔值 , 对象 ….</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026155647344.png" alt="image-20211026155647344" style="zoom:50%;border: solid" />    </li>
</ul>
<h2 id="12-2-数组的下标"><a href="#12-2-数组的下标" class="headerlink" title="12,2 数组的下标"></a>12,2 数组的下标</h2><p><strong>索引(下标)</strong> : 用来访问数组的符号 ( 数组的下标/索引 从 0 开始 )</p>
<p>数组可以通过下标来访问 , 设置 , 修改对应的元素</p>
<p>语法 : <strong>数组名[索引值]</strong> , 该语法用于获取数组中的元素</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用字面量的方式创建带有初始值得数组</span></span><br><span class="line"><span class="keyword">var</span> arrD = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="number">30</span>,<span class="literal">true</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arrD);</span><br><span class="line"><span class="comment">// 通过数组的索引获取数组中的每个元素</span></span><br><span class="line"><span class="built_in">console</span>.log(arrD[<span class="number">0</span>]);<span class="comment">// 张三</span></span><br><span class="line"><span class="built_in">console</span>.log(arrD[<span class="number">1</span>]);<span class="comment">// 李四</span></span><br><span class="line"><span class="built_in">console</span>.log(arrD[<span class="number">2</span>]);<span class="comment">// 30</span></span><br><span class="line"><span class="built_in">console</span>.log(arrD[<span class="number">3</span>]);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(arrD[<span class="number">4</span>]);<span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<p><strong>==注意 : 如果输出数组中没有的元素 , 结果是 undefined , 因为没有定义这个元素==</strong></p>
<h2 id="12-3-数组的遍历"><a href="#12-3-数组的遍历" class="headerlink" title="12,3 数组的遍历"></a>12,3 数组的遍历</h2><ul>
<li><p>属性 : <strong>length</strong> , 对应的数组中元素的个数</p>
<p><strong>==注意 : 数组的长度和数组的下标是不同的 , 数字的下表要比长度 -1==</strong></p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建数组,LOL,DNF,CS,WOW</span></span><br><span class="line"><span class="comment">// 通过数组的索引获得你想要玩的游戏</span></span><br><span class="line"><span class="keyword">var</span> games = [<span class="string">&#x27;LOL&#x27;</span>,<span class="string">&#x27;DNF&#x27;</span>,<span class="string">&#x27;CS&#x27;</span>,<span class="string">&#x27;WOW&#x27;</span>,<span class="string">&#x27;使命召唤&#x27;</span>];</span><br><span class="line"><span class="built_in">console</span>.log(games[<span class="number">0</span>]);<span class="comment">// LOL</span></span><br><span class="line"><span class="built_in">console</span>.log(games[<span class="number">1</span>]);<span class="comment">// DNF</span></span><br><span class="line"><span class="built_in">console</span>.log(games[<span class="number">2</span>]);<span class="comment">// CS</span></span><br><span class="line"><span class="built_in">console</span>.log(games[<span class="number">3</span>]);<span class="comment">// WOW</span></span><br><span class="line"><span class="comment">// 通过数组的 length属性获得数组的元素个数</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; games.length; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(games[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026161347831.png" alt="image-20211026161347831" style="zoom: 67%;border: solid" />    



<p><strong>案例 : 求数组中各个元素值之和</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">12</span>,<span class="number">34</span>,<span class="number">567</span>,<span class="number">890</span>],</span><br><span class="line">    sum = <span class="number">0</span>;</span><br><span class="line"><span class="comment">// 1,将数组中的所有的元素取出</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    sum += arr[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026162026634.png" alt="image-20211026162026634" style="zoom:80%;border: solid" />    



<p><strong>案例 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">2</span>,<span class="number">77</span>,<span class="number">22</span>,<span class="number">52</span>,<span class="number">8</span>,<span class="number">12</span>],</span><br><span class="line">    max = arr2[<span class="number">0</span>],</span><br><span class="line">    min = arr2[<span class="number">0</span>];</span><br><span class="line"><span class="comment">//求最大值和最小值</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr2.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span>(max &lt; arr2[i]) &#123;</span><br><span class="line">        max = arr2[i];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(min &gt; arr2[i]) &#123;</span><br><span class="line">        min = ar2r[i];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;arr2中最大值:&#x27;</span> + max + <span class="string">&#x27;,最小值:&#x27;</span> + min);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026162713639.png" alt="image-20211026162713639" style="zoom:67%;border: solid" />    



<h2 id="12-4-JS数组新增元素"><a href="#12-4-JS数组新增元素" class="headerlink" title="12,4 JS数组新增元素"></a>12,4 JS数组新增元素</h2><h3 id="12-4-1-通过修改length长度"><a href="#12-4-1-通过修改length长度" class="headerlink" title="12,4,1 通过修改length长度"></a>12,4,1 通过修改length长度</h3><ul>
<li>修改length属性值 , 实现数组的扩容</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrE = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>];</span><br><span class="line"><span class="comment">// 通过修改数组 length 属性新增元素</span></span><br><span class="line">arrE.length = <span class="number">5</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arrE);</span><br><span class="line"><span class="built_in">console</span>.log(arrE[<span class="number">3</span>]);<span class="comment">// undefined</span></span><br><span class="line"><span class="built_in">console</span>.log(arrE[<span class="number">4</span>]);<span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026164828199.png" alt="image-20211026164828199">    </p>
<p><strong>==由于新增元素没有被赋值 , 所以输出的内容是 undefined==</strong></p>
<h3 id="12-4-2-通过修改数组的索引"><a href="#12-4-2-通过修改数组的索引" class="headerlink" title="12,4,2 通过修改数组的索引"></a>12,4,2 通过修改数组的索引</h3><ul>
<li>可以通过修改数组的索引对数组的元素进行新增的操作</li>
<li><strong>不能直接给数组名赋值</strong> , 会将原有的数组覆盖掉</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrF = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>];</span><br><span class="line"><span class="comment">// 通过修改数组索引新增数组的元素</span></span><br><span class="line">arrF[<span class="number">3</span>] = <span class="string">&#x27;赵六&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arrF);</span><br><span class="line">arrF[<span class="number">4</span>] = <span class="string">&#x27;冯七&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arrF);</span><br><span class="line"><span class="comment">// 替换已有的元素的值</span></span><br><span class="line">arrF[<span class="number">0</span>] = <span class="string">&#x27;老八&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arrF);</span><br><span class="line"><span class="comment">// 现有的值直接讲arrF变量中原有数组覆盖掉了</span></span><br><span class="line">arrF = <span class="string">&#x27;小智&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arrF);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026165013931.png" alt="image-20211026165013931" style="zoom:50%;border: solid" />    





<ul>
<li><strong>案例 : 为空数组新增元素, 新增的内容是1~10之间的整数</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	案例1: 为空数组新增元素, 新增的内容是1~10之间的整数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> arrG = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">10</span>; i++) &#123;</span><br><span class="line">    arrG[i - <span class="number">1</span>] = i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arrG);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026171353084.png" alt="image-20211026171353084">    </p>
<ul>
<li><strong>案例2: 将数组 [2,0,6,1,77,54,10,21,3,9] 中大于10的数字存入一个新的数组中</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrH = [<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">1</span>,<span class="number">77</span>,<span class="number">54</span>,<span class="number">10</span>,<span class="number">21</span>,<span class="number">3</span>,<span class="number">9</span>],</span><br><span class="line">    newArr = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrH.length; i++) &#123;</span><br><span class="line">    <span class="comment">// 判断只有元素值大于10将其添加到新数组中</span></span><br><span class="line">    <span class="keyword">if</span>(arrH[i] &gt;= <span class="number">10</span>) &#123;</span><br><span class="line">        newArr[newArr.length] = arrH[i];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(newArr);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026171516854.png" alt="image-20211026171516854">    </p>
<ul>
<li><strong>案例3: 将数组 [2,0,6,0,77,54,0,21,0,9]将数组中除0的元素, 以外的其他元素存入新的数组</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrI = [<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">0</span>,<span class="number">77</span>,<span class="number">54</span>,<span class="number">0</span>,<span class="number">21</span>,<span class="number">0</span>,<span class="number">9</span>],</span><br><span class="line">    newArr2 = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrI.length; i++) &#123;</span><br><span class="line">    <span class="comment">// 判断元素不为0的情况下,添加近新数组中</span></span><br><span class="line">    <span class="keyword">if</span>(arrI[i] != <span class="number">0</span>) &#123;</span><br><span class="line">        newArr2[newArr2.length] = arrI[i];</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(newArr2);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026171524288.png" alt="image-20211026171524288">    </p>
<ul>
<li><strong>案例4: 定义两个数组,将两个数组进行合并</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrK = [<span class="number">12</span>,<span class="number">456</span>,<span class="number">78</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> arrL = [<span class="number">98</span>,<span class="number">75</span>,<span class="number">4</span>,<span class="number">62</span>];</span><br><span class="line"><span class="comment">// 将arrL中的元素添加入arrK的末尾</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrL.length; i++) &#123;</span><br><span class="line">    arrK[arrK.length] = arrL[i];</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arrK);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211026172914006.png" alt="image-20211026172914006">    </p>
<h2 id="12-5-冒泡排序"><a href="#12-5-冒泡排序" class="headerlink" title="12,5 冒泡排序"></a>12,5 冒泡排序</h2><p>把一些列的数组按照一定的顺序进行排列显示 (从大到小 , 从小到大)</p>
<p>通过循环完成 , 访问每一个元素 , 将前一个元素和后一个元素进行笔尖 , 如果前者大于 / 小于, 进行交换</p>
<p>分析 : </p>
<ol>
<li><p>一共需要多少趟比较 , 外层for循环</p>
<p>如果是 5 个数据 , 就是 4 趟 , 比较的趟数 , 数组的长度 -  1</p>
</li>
<li><p>每一趟进行多少次交换 , 由内层for循环控制</p>
<p>第一趟交换 4 次    0 ~ 3   5 - 0 -1 4</p>
<p>第二趟交换 3 次    0 ~ 2   5 - 1 - 1 3</p>
<p>第三趟交换 2 次    0 ~ 1   5 - 2 - 1 2</p>
<p>第四趟交换 1 次    0 ~ 0   5 - 2 - 1 1</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrK = [<span class="number">12</span>,<span class="number">456</span>,<span class="number">78</span>,<span class="number">5</span>,<span class="number">98</span>,<span class="number">75</span>,<span class="number">4</span>,<span class="number">62</span>];</span><br><span class="line"><span class="comment">// 比较的趟数 , 数组的长度 -1,外层for循环控制</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arrK.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">    <span class="comment">//条件: j &lt; 数组长度 - 当前的趟数 - 1</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arrK.length - <span class="number">1</span> - i; j++) &#123;</span><br><span class="line">        <span class="comment">//数据的交换</span></span><br><span class="line">        <span class="keyword">if</span>(arrK[j] &gt; arrK[j + <span class="number">1</span>]) &#123;</span><br><span class="line">            <span class="keyword">var</span> num = arrK[j];</span><br><span class="line">            arrK[j] = arrK[j + <span class="number">1</span>];</span><br><span class="line">            arrK[j + <span class="number">1</span>] = num;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(arrK);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027091250952.png" alt="image-20211027091250952">    </p>
<h1 id="13-函数"><a href="#13-函数" class="headerlink" title="13, 函数"></a>13, 函数</h1><h2 id="13-1-函数的概念"><a href="#13-1-函数的概念" class="headerlink" title="13,1 函数的概念"></a>13,1 函数的概念</h2><p>在 JavaScript 语言中 , 可以有很多相同的代码或者功能相同的代码</p>
<p><strong>这些被大量重复使用的代码 , 可以将其封装到函数中</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<ul>
<li><p>没有使用函数的情况</p>
<p>代码的重复度极高 , 复用性很差</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	求1~100之间数字的和,</span></span><br><span class="line"><span class="comment">	求20~50之间数字的和,</span></span><br><span class="line"><span class="comment">	求33~66之间数字的和,</span></span><br><span class="line"><span class="comment">	.......</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">100</span>; i++) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br><span class="line">sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">20</span>; i &lt;= <span class="number">50</span>; i++) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br><span class="line">sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">33</span>; i &lt;= <span class="number">66</span>; i++) &#123;</span><br><span class="line">    sum += i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br></pre></td></tr></table></figure>



<ul>
<li>使用了函数之后</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	语法: </span></span><br><span class="line"><span class="comment">	function 函数名(参数列表) &#123;</span></span><br><span class="line"><span class="comment">		// 代码</span></span><br><span class="line"><span class="comment">	&#125;</span></span><br><span class="line"><span class="comment">	注意函数的名称和参数的名称要见名知意</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">start, end</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = start; i &lt;= end; i++) &#123;</span><br><span class="line">        sum += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(sum);</span><br><span class="line">&#125;</span><br><span class="line">getSum(<span class="number">1</span>,<span class="number">100</span>);</span><br><span class="line">getSum(<span class="number">20</span>,<span class="number">50</span>);</span><br><span class="line">getSum(<span class="number">33</span>,<span class="number">66</span>);</span><br></pre></td></tr></table></figure>



<h2 id="13-2-函数的使用"><a href="#13-2-函数的使用" class="headerlink" title="13,2 函数的使用"></a>13,2 函数的使用</h2><p>函数的使用分为两个步骤</p>
<p>第一步 : 声明函数</p>
<p>第二部 : 调用函数</p>
<p><strong>声明函数的语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> 函数名(<span class="params">参数列表</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol>
<li>function 声明函数的关键字 , 英文小写</li>
<li><strong>函数声明后不调用自己不会执行 , 必须调用才可以实现功能</strong></li>
<li><strong>调用函数的时候 , 语法 : ==函数名(参数….)==</strong></li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	1,声明一个函数可以计算任意正整数~0之间偶数的和</span></span><br><span class="line"><span class="comment">  	并调用函数进行测试</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt;= num; i++) &#123;</span><br><span class="line">        sum += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(sum);</span><br><span class="line">&#125;</span><br><span class="line">getSum(<span class="number">22</span>);</span><br><span class="line">getSum(<span class="number">100</span>);</span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	2,计算用户输入数字是否为水仙花数</span></span><br><span class="line"><span class="comment">	每一位三次方相加之和等于他自己</span></span><br><span class="line"><span class="comment">	是: 提示该数字位水仙花数,反之: 提示不是即可</span></span><br><span class="line"><span class="comment">	3位数,如果不是3位数,提示数值过大无法计算</span></span><br><span class="line"><span class="comment">	测试: 153 : 1 + 125 + 27</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getDaf</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(num &lt; <span class="number">1000</span> &amp;&amp; num &gt;= <span class="number">100</span>) &#123;</span><br><span class="line">        <span class="comment">// 个位</span></span><br><span class="line">        <span class="keyword">var</span> ge = num % <span class="number">10</span>,</span><br><span class="line">            shi = <span class="built_in">parseInt</span>(num % <span class="number">100</span> / <span class="number">10</span>),</span><br><span class="line">            bai = <span class="built_in">parseInt</span>(num / <span class="number">100</span>);</span><br><span class="line">        mul = ge * ge * ge + shi * shi * shi + bai * bai * bai;</span><br><span class="line">        <span class="keyword">if</span>(mul == num) &#123;</span><br><span class="line">            alert(num + <span class="string">&#x27;是一个水仙花数&#x27;</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            alert(num + <span class="string">&#x27;不是一个水仙花数&#x27;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        alert(<span class="string">&#x27;数值过大无法计算&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">getDaf(<span class="number">371</span>);</span><br></pre></td></tr></table></figure>



<h2 id="13-3-函数的参数"><a href="#13-3-函数的参数" class="headerlink" title="13,3 函数的参数"></a>13,3 函数的参数</h2><ul>
<li><strong>形参</strong> 和 <strong>实参</strong></li>
</ul>
<p>形参 : 形式上的参数 , 代表着这个位置是可以传递参数的 , 在声明函数的小括号中</p>
<p>实参 : 实际传入函数的参数 , 写在调用函数的 () 里的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> 函数名(<span class="params">形参<span class="number">1</span>,形参<span class="number">2</span>,...</span>) </span>&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line">函数名(实参<span class="number">1</span>,实参<span class="number">2</span>,...);</span><br></pre></td></tr></table></figure>

<p><strong>参数 : 在调用函数的时候 , 内有一些不固定的值 , 我们可以通过参数将这些不固定的值传递进去</strong></p>
<p><strong>案例 : 求两个数字之间整数之和</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">start, end</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 声明三个变量,两个暂时等于传递的参数</span></span><br><span class="line">    <span class="keyword">var</span> sum = <span class="number">0</span>,</span><br><span class="line">        n1 = start,</span><br><span class="line">        n2 = end;</span><br><span class="line">    <span class="comment">// 判断两者的大小</span></span><br><span class="line">    <span class="keyword">if</span>(n1 &gt; n2) &#123;</span><br><span class="line">        start = n2;</span><br><span class="line">        end = n1;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = start; i &lt;= end; i++) &#123;</span><br><span class="line">        sum += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(sum);</span><br><span class="line">&#125;</span><br><span class="line">getSum(<span class="number">100</span>,<span class="number">1</span>);</span><br><span class="line">getSum(<span class="number">20</span>,<span class="number">50</span>);</span><br><span class="line">getSum(<span class="number">33</span>,<span class="number">66</span>);</span><br></pre></td></tr></table></figure>

<p><strong>参数 : 可以看做一个不用声明的变量</strong></p>
<h2 id="13-4-形参和实参匹配问题"><a href="#13-4-形参和实参匹配问题" class="headerlink" title="13,4 形参和实参匹配问题"></a>13,4 形参和实参匹配问题</h2><ul>
<li>实参的个数和形参是相同的 , 会输出正常的结果</li>
<li>实参的个数多于形参个数 , 只取形参的个数的参数 , 不会报错</li>
<li>实参的个数少于形参个数 , 没有传递值得参数默认为 undefined , 结果 NaN</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个函数,指定两个参数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">n1, n2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> sum = n1 + n2;</span><br><span class="line">    <span class="built_in">console</span>.log(n1 + <span class="string">&#x27;与&#x27;</span> + n2 + <span class="string">&#x27;两者之和为:&#x27;</span> + sum);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1,实参的个数和形参是相同的</span></span><br><span class="line">getSum(<span class="number">123</span>,<span class="number">456</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2,实参的个数多于形参个数</span></span><br><span class="line">getSum(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3,实参的个数少于形参个数</span></span><br><span class="line">getSum(<span class="number">123</span>);</span><br><span class="line">getSum();</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027135131864.png" alt="image-20211027135131864" style="zoom:67%;border: solid" />    



<h2 id="13-5-函数的返回值"><a href="#13-5-函数的返回值" class="headerlink" title="13,5 函数的返回值"></a>13,5 函数的返回值</h2><ul>
<li><strong>return</strong></li>
</ul>
<p>**语法 : **</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> 函数名(<span class="params">参数</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 函数体</span></span><br><span class="line">    <span class="keyword">return</span> 需要返回的结果;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用函数,使用变量接收函数的返回值</span></span><br><span class="line"><span class="keyword">var</span> 变量 = 函数名(参数);</span><br></pre></td></tr></table></figure>

<ol>
<li>函数的目的就是实现功能 , 最终将结果返回给调用这 , 这歌功能我们可以通过 <strong>return</strong> 语句实现</li>
<li>只要在函数中遇到 return 就会将后面的结果返回给调用者</li>
</ol>
<p><strong>案例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	声明一个函数,求两个数字之间的最大值</span></span><br><span class="line"><span class="comment">	getMax(arg1,arg2)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMax</span>(<span class="params">arg1,arg2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> arg1 &gt; arg2 ? arg1 : arg2;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> max = getMax(<span class="number">1324</span>,<span class="number">789</span>);</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br></pre></td></tr></table></figure>



<p><strong>==return的注意点==</strong></p>
<ul>
<li><p><strong>return 后面的代码不会被执行</strong></p>
</li>
<li><p><strong>return 一次只能返回一个值 , 如果有多个被逗号隔开的值, 以最后一个为准</strong></p>
</li>
<li><p><strong>函数如果需要返回多个值 , 可以通过数组来实现</strong></p>
</li>
</ul>
<p><strong>案例 : 通过函数的计算两个数字,加减乘除的结果 , 并将结果筒骨返回值的方式获取出来</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRes</span>(<span class="params">n1,n2</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> jia = n1 + n2,</span><br><span class="line">        cheng = n1 * n2,</span><br><span class="line">        chu = n1 / n2,</span><br><span class="line">        jian = n1 - n2;</span><br><span class="line">    <span class="keyword">return</span> [jia,jian,cheng,chu];</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> resArr = getRes(<span class="number">100</span>,<span class="number">30</span>);</span><br><span class="line"><span class="built_in">console</span>.log(resArr);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027142021584.png" alt="image-20211027142021584">    </p>
<ul>
<li><strong>==如果函数中没有写 return 的值 , 默认返回 undefined==</strong></li>
</ul>
<h2 id="13-6-break-continue-return-的区别"><a href="#13-6-break-continue-return-的区别" class="headerlink" title="13,6 break continue return 的区别"></a>13,6 break continue return 的区别</h2><ul>
<li>break : 退出循环</li>
<li>continue : 跳出当次循环</li>
<li>return : 不仅可以退出循环 , 还会结束档前函数这体中的代码</li>
</ul>
<h2 id="13-7-arguments-的使用"><a href="#13-7-arguments-的使用" class="headerlink" title="13,7 arguments 的使用"></a>13,7 <a target="_blank" rel="noopener" href="http://www.youdao.com/w/arguments/#keyfrom=E2Ctranslation">arguments</a> 的使用</h2><p>arguments : 参数</p>
<p>使用场景 : 当我们不确定函数参数个数的个数的时候 , 可以使用 arguments 定义形参</p>
<p>在 JS 中 , arguments 实际上是函数中的一个<strong>内置对象</strong> , 所有的函数都已一个 arguments , 在 argumnets 中存储了 <strong>“传递进入参数的实参”</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">arguments</span>);</span><br><span class="line">&#125;</span><br><span class="line">fun2();</span><br><span class="line">fun2(<span class="string">&#x27;张三&#x27;</span>,<span class="number">18</span>,<span class="number">2021</span>);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027144218961.png" alt="image-20211027144218961"></p>
<blockquote>
<p><strong>arguments 展示的形式一个伪数组 ,</strong> 可以进行遍历 , 同时具备了数组的特点</p>
</blockquote>
<ul>
<li><p>具有 length</p>
</li>
<li><p>按照索引的方式存储数据</p>
</li>
<li><p><strong>但是不具有数组的某些方法</strong> , <strong>push() , pop()</strong></p>
</li>
</ul>
<p><strong>伪数组 : 并不是真正意义上的数组</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun3</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1,打印arguments的长度属性</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;长度:&#x27;</span> + <span class="built_in">arguments</span>.length);</span><br><span class="line">    <span class="comment">// 2,通过循环的下标方式遍历arguments</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用fun3</span></span><br><span class="line">fun3(<span class="number">12</span>,<span class="number">435</span>,<span class="number">56</span>,<span class="number">78</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027144805588.png" alt="image-20211027144805588" style="zoom:67%;border: solid" />    



<p><strong>案例 : 定义一个函数 , 接收任意数量的数据 , 判断这些数据中的最大值是哪一个 , 并将最大值通过返回值的形式获取出来</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个函数,获取任意数字之间的最大值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMax</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 定义一个变量存储最大值</span></span><br><span class="line">    <span class="keyword">var</span> max = <span class="number">0</span>;</span><br><span class="line">    <span class="comment">// 遍历传入的实参,arguments</span></span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        <span class="comment">// 判断arguments中的元素是否大于max</span></span><br><span class="line">        <span class="keyword">if</span>(max &lt; <span class="built_in">arguments</span>[i]) &#123;</span><br><span class="line">            max = <span class="built_in">arguments</span>[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> max;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getMax(<span class="number">64</span>,<span class="number">23</span>,<span class="number">657</span>,<span class="number">87</span>,<span class="number">234</span>));</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027145903962.png" alt="image-20211027145903962" style="zoom:50%;border: solid" />    



<h2 id="13-8-函数之间的调用"><a href="#13-8-函数之间的调用" class="headerlink" title="13,8 函数之间的调用"></a>13,8 函数之间的调用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;fun1代码被执行了.....&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 在fun2中调用 fun1</span></span><br><span class="line">    fun1();</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;fun2代码被执行了.....&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用fun2()</span></span><br><span class="line">fun2();</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027150321648.png" alt="image-20211027150321648" style="zoom:50%;" />    

<p>当我们在调用 fun2的时候 , 同时在 fun2 之中调用了 fun1的代码 , 在这里 fun1 中的代码称为了 fun2 的一部分</p>
<ul>
<li><p><strong>案例 : 判读用户输入的年份的2月有几天</strong></p>
<ul>
<li><p>定义两个函数 : isRun() 判断平润年 , 是闰年返回 true ,反之返回 false</p>
<p>年份整除4但是不能整数100,或者整除400</p>
</li>
<li><p>判断天数 : 用户输入年份 , 调用 isRun() 判断平润年 , 如果是闰年 返回 29 , 反之返回 28</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isRunYear</span>(<span class="params">year</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(year % <span class="number">400</span> == <span class="number">0</span> || year % <span class="number">4</span> == <span class="number">0</span> &amp;&amp; year % <span class="number">100</span> != <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getFebDate</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 获取用户输入的年份</span></span><br><span class="line">    <span class="keyword">var</span> year = prompt(<span class="string">&#x27;请输入年份.....&#x27;</span>);</span><br><span class="line">    <span class="comment">// 通过isRunYear()判断是否是闰年,并传入参数</span></span><br><span class="line">    <span class="comment">// 判断结果为true就是28天,反之为29天</span></span><br><span class="line">    <span class="keyword">if</span>(isRunYear(year)) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">29</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">28</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调用 getFebDate()</span></span><br><span class="line"><span class="built_in">console</span>.log(getFebDate());</span><br></pre></td></tr></table></figure>



<h2 id="13-9-声明函数的两种方式"><a href="#13-9-声明函数的两种方式" class="headerlink" title="13,9 声明函数的两种方式"></a>13,9 声明函数的两种方式</h2><ul>
<li><p>方式1 : 利用函数 function 关键字 , 声明函数</p>
</li>
<li><p>方式2 : 函数表达式 , 通过变量来声明函数</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="function"><span class="keyword">function</span>(<span class="params">参数</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数声明和变量的声明相同的,只不过在变量中存储的是函数</span></span><br><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">&#x27;你好&#x27;</span> + name + <span class="string">&#x27;,欢迎回来!!!&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 调用函数</span></span><br><span class="line">fn(<span class="string">&#x27;李四&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p><strong>注意 : var 后面的事变量名不是函数名 , 这里的函数式没有名字的 , 所以这类函数可以被称为匿名函数</strong></p>
<h1 id="14-JS-的作用域"><a href="#14-JS-的作用域" class="headerlink" title="14, JS 的作用域"></a>14, JS 的作用域</h1><h2 id="14-1-作用域"><a href="#14-1-作用域" class="headerlink" title="14,1 作用域"></a>14,1 作用域</h2><p>在代码中用到的名字 (函数名 , 变量名) 不一定总是有效的 , 受到了一定范围的限制 , 限制他的范围就是 <strong>作用域</strong></p>
<ul>
<li>全局作用域</li>
</ul>
<p>整个 script 标签 , 或者一个单独的 ,js 文件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// num 就是一个全局变量</span></span></span><br><span class="line"><span class="javascript">	<span class="keyword">var</span> num = <span class="number">100</span>;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>





<ul>
<li>局部作用域</li>
</ul>
<p>在函数中的时候就是局部变量 , 这个变量只在函数中是有效的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个全局变量</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 声明一个局部变量</span></span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;打印局部变量num:&#x27;</span> + num);<span class="comment">// 10</span></span><br><span class="line">&#125;</span><br><span class="line">fun();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;打印全局变量num:&#x27;</span> + num);<span class="comment">// 100</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027155031712.png" alt="image-20211027155031712" style="zoom:67%;border: solid" />    





<ul>
<li><strong>全局变量的特殊情况</strong></li>
</ul>
<blockquote>
<p><strong>定义在函数的内部 , 但是没有使用 var 关键字 , 也属于全局变量</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    temp = <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意: 必须要先调用函数,才能使函数中的变量生效</span></span><br><span class="line">fun1();</span><br><span class="line"><span class="built_in">console</span>.log(temp);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027155331296.png" alt="image-20211027155331296" style="zoom:67%;border: solid" />    



<ul>
<li>函数的形参属于局部变量 , 只能在函数中使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params">arg</span>) </span>&#123;</span><br><span class="line">    temp = <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意: 必须要先调用函数,才能使函数中的变量生效</span></span><br><span class="line">fun1();</span><br><span class="line"><span class="built_in">console</span>.log(temp);</span><br><span class="line"><span class="built_in">console</span>.log(arg);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027155811641.png" alt="image-20211027155811641">    </p>
<ul>
<li><strong>全局变量</strong> 和 <strong>局部变量</strong> 的使用区别</li>
</ul>
<p>**全局变量 : **在任何一个角落中都可以使用 , 但是只有在浏览器关闭的时候才会销毁 , 比较占用内存</p>
<p><strong>局部变量 :</strong> 只能在函数中使用 , 在函数中的代码块执行的时候 , 被初始化 , 代码块运行结束 , 就会销毁其占用的内存 , 比较节省空间的</p>
<h2 id="14-2-JS中目前没有块级作用域"><a href="#14-2-JS中目前没有块级作用域" class="headerlink" title="14,2 JS中目前没有块级作用域"></a>14,2 JS中目前没有块级作用域</h2><p><strong>作用域 : { … } , if , else , for , while</strong></p>
<p>在 JS 中没有代码块的限制 , <strong>除了在函数中声明的变量在作用域外是不可用的</strong> , 其他 {  } 中声明的变量都可以使用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="number">3</span> &lt; <span class="number">5</span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> nn = <span class="number">123</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(nn);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027160510265.png" alt="image-20211027160510265">    </p>
<h2 id="14-3-作用域链"><a href="#14-3-作用域链" class="headerlink" title="14,3 作用域链"></a>14,3 作用域链</h2><p><strong>当不通过的作用域中出现同名变量的时候 , 在函数中使用的变量会先找类自己最近的 , 如果没有向外层去找</strong></p>
<p><strong>这种形式就是 ： 就近原则</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 就近原则</span></span><br><span class="line"><span class="keyword">var</span> aa = <span class="number">100</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> aa = <span class="number">10</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">fn2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(aa);</span><br><span class="line">    &#125;</span><br><span class="line">    fn2();</span><br><span class="line">&#125;</span><br><span class="line">fn1();</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027160950782.png" alt="image-20211027160950782">    </p>
<h1 id="15-JS预解析"><a href="#15-JS预解析" class="headerlink" title="15, JS预解析"></a>15, JS预解析</h1><h2 id="15-1-变量和函数使用的特殊情况"><a href="#15-1-变量和函数使用的特殊情况" class="headerlink" title="15,1 变量和函数使用的特殊情况"></a>15,1 变量和函数使用的特殊情况</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 情况1: 使用一个变量没有声明,也不赋值</span></span><br><span class="line"><span class="comment">// console.log(a);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 情况2: 变量先使用,后声明</span></span><br><span class="line"><span class="built_in">console</span>.log(b);<span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="number">123</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 情况3: 函数先使用后声明</span></span><br><span class="line">fun();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">66666666</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 情况4: 函数表达式先使用后声明</span></span><br><span class="line">fn();</span><br><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">88888888</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211027162135279.png" alt="image-20211027162135279">    </p>
<h2 id="15-2-JS代码的执行过程"><a href="#15-2-JS代码的执行过程" class="headerlink" title="15,2 JS代码的执行过程"></a>15,2 JS代码的执行过程</h2><p>JS 代码是浏览器中的 JS 解析器类执行的</p>
<p>JS 解析器在运行的时候分为两步</p>
<ul>
<li><p>第一步 : <strong>预解析</strong></p>
<p>JS 引擎 , 会将 JS 代码中的 var 和 function 提升到作用域最前面</p>
</li>
<li><p>第二步 : 执行</p>
<p>代码按照书写流程 , 从上向下执行</p>
</li>
</ul>
<h2 id="15-3-预解析的分类"><a href="#15-3-预解析的分类" class="headerlink" title="15,3 预解析的分类"></a>15,3 预解析的分类</h2><p>分为 <strong>变量预解析</strong> 和 <strong>函数预解析</strong></p>
<ul>
<li>变量的预解析</li>
</ul>
<p>变量的提升 , 就是把变量的声明提升到当前作用域的最前面 , ==不提升不知操作==</p>
<p><strong>对情况2的解释</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 情况2: 变量先使用,后声明</span></span><br><span class="line"><span class="built_in">console</span>.log(b);<span class="comment">// undefined</span></span><br><span class="line"><span class="keyword">var</span> b = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>

<p>以上代码在预解析的过程中是这样的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> b;</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line">b = <span class="number">123</span>;</span><br></pre></td></tr></table></figure>



<p><strong>对情况4 的解释</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 情况4: 函数表达式先使用后声明</span></span><br><span class="line">fn();</span><br><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">88888888</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>以上代码在预解析的过程中是这样的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn;</span><br><span class="line">fn();</span><br><span class="line">fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">88888888</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>fn 并不是函数 , 而是变量 , 所以在这里将 fn 的声明提升到了作用域的最前方</p>
<p>使用调用函数的形式 , 来使用一个普通变量就会报错 <strong>fn is not a function</strong></p>
<ul>
<li><strong>函数预解析</strong></li>
</ul>
<p>函数的提升是 , 直接将函数的声明提升到最前方</p>
<p><strong>对情况3的解释</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fun();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">66666666</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>以上代码在预解析的过程中是这样的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">66666666</span>);</span><br><span class="line">&#125;</span><br><span class="line">fun();</span><br></pre></td></tr></table></figure>

<p>会正常执行 , 不会报错</p>
<p><strong>看图写结果1</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line">fun();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(num);</span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>程序运行的结果 ?</p>
<p>undefined</p>
<p><strong>看图写结果2</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">fun();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(num);</span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(num);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>程序运行的结果 ?</p>
<p>undefined</p>
<p>20</p>
<p><strong>看图写结果3</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line">fn();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">10</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">    <span class="built_in">console</span>.log(b);</span><br><span class="line">	<span class="keyword">var</span> a = <span class="string">&#x27;789&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>程序运行的结果 ?</p>
<p>undefined</p>
<p>10</p>
<p><strong>看图写结果4</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">f1();</span><br><span class="line"><span class="built_in">console</span>.log(c);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = b = c = <span class="number">9</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">    <span class="built_in">console</span>.log(b);</span><br><span class="line">    <span class="built_in">console</span>.log(c);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>程序运行的结果 ?</p>
<blockquote>
<p>以上代码经过预解析后</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = b = c = <span class="number">9</span>;</span><br><span class="line">    <span class="comment">// 相当于</span></span><br><span class="line">    <span class="comment">// a是局部变量,b,c没有var的声明属于全局变量</span></span><br><span class="line">    <span class="comment">// var a = 9; b = 9; c = 9;</span></span><br><span class="line">    <span class="built_in">console</span>.log(a);<span class="comment">// 9</span></span><br><span class="line">    <span class="built_in">console</span>.log(b);<span class="comment">// 9</span></span><br><span class="line">    <span class="built_in">console</span>.log(c);<span class="comment">// 9</span></span><br><span class="line">&#125;</span><br><span class="line">f1();</span><br><span class="line"><span class="built_in">console</span>.log(c);<span class="comment">// 9</span></span><br><span class="line"><span class="built_in">console</span>.log(b);<span class="comment">// 9</span></span><br><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">// 报错</span></span><br></pre></td></tr></table></figure>





<h1 id="16-JS对象"><a href="#16-JS对象" class="headerlink" title="16, JS对象"></a>16, JS对象</h1><h2 id="16-1-什么是对象"><a href="#16-1-什么是对象" class="headerlink" title="16,1 什么是对象"></a>16,1 什么是对象</h2><p>万物皆为对象</p>
<p>对象就是一个具体的事务 : 一本书 , 一支笔 , 一个人 …</p>
<p>数据库 , 一个网页 , 一个服务器 , 一条sql</p>
<p>JS 中的对象是一组无序的相关属性的集合 </p>
<ul>
<li>对象有两个组成部分<ul>
<li>属性 : <strong>事物的特征</strong></li>
<li>方法 : <strong>事物的行为</strong></li>
</ul>
</li>
</ul>
<h2 id="16-2-为什么需要对象"><a href="#16-2-为什么需要对象" class="headerlink" title="16,2 为什么需要对象"></a>16,2 为什么需要对象</h2><p>要保存多个值 , 要有保存方法 , 并且存储有特殊意义的信息</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 前面的张三我们知道是姓名 , 后面的数字就不知道是啥了</span></span><br><span class="line"><span class="keyword">var</span> zhangSan = [<span class="string">&#x27;张三&#x27;</span>,<span class="number">22</span>,<span class="number">6000</span>,<span class="number">183</span>,<span class="number">301</span>];</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在JS 对象中表达结果 , 更加清晰</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> zhangSan = &#123;&#125;;</span><br><span class="line">zhangSan.name = <span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line">zhangSan.age = <span class="number">22</span>;</span><br><span class="line">zhangSan.salary = <span class="number">6000</span>;</span><br><span class="line">zhangSan.height = <span class="number">183</span>;</span><br><span class="line">zhangSan.home = <span class="number">301</span>;</span><br><span class="line"><span class="built_in">console</span>.log(zhangSan);</span><br></pre></td></tr></table></figure>



<h2 id="16-3-创建对象的3方式"><a href="#16-3-创建对象的3方式" class="headerlink" title="16,3 创建对象的3方式"></a>16,3 创建对象的3方式</h2><ul>
<li>利用 <strong>字面量</strong> 创建</li>
<li>利用 <strong>new Object</strong> 创建对象</li>
<li>利用 <strong>构造函数</strong> 创建对象</li>
</ul>
<blockquote>
<p><strong>通过字面量创建</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过字面量创建对象</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">22</span>,</span><br><span class="line">    <span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span>,</span><br><span class="line">    <span class="comment">// 声明一个函数,称作方法</span></span><br><span class="line">    <span class="attr">eatFood</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是一个吃货.....&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj);</span><br></pre></td></tr></table></figure>

<ul>
<li>属性和方法采用 : <strong>属性名: 属性值</strong> 这种键值对的格式进行编写</li>
<li>多个属性和方法使用逗号隔开</li>
<li>方法名 : 后面是一个匿名函数</li>
<li>使用属性 : 对象名.属性名调用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(obj.name);</span><br><span class="line"><span class="built_in">console</span>.log(obj.age);</span><br></pre></td></tr></table></figure>

<ul>
<li>使用属性 : 对象名.[‘属性名’]调用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(obj[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(obj[<span class="string">&#x27;age&#x27;</span>]);</span><br></pre></td></tr></table></figure>

<ul>
<li>使用方法: 对象名.方法名();</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">obj.eatFood();</span><br></pre></td></tr></table></figure>



<p><strong>案例 : 请创建一个对象</strong></p>
<p>创建一只猫</p>
<p>姓名: 蛋黄</p>
<p>年龄: 2</p>
<p>体重: 8斤</p>
<p>颜色: 黑色</p>
<p>技能: 卖萌, 喝牛奶</p>
<blockquote>
<p><strong>通过 new Object() 创建对象</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">obj.name = <span class="string">&#x27;李四&#x27;</span>;</span><br><span class="line">obj.age = <span class="number">30</span>;</span><br><span class="line">obj.gender = <span class="string">&#x27;男&#x27;</span>;</span><br><span class="line">obj.working = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;键盘敲烂,月薪过万....&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(obj.name);</span><br><span class="line"><span class="built_in">console</span>.log(obj[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line">obj.working();</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028094137967.png" alt="image-20211028094137967">    </p>
<p><strong>案例 : 通过 new Object 创建对象</strong></p>
<p>姓名 : 马云</p>
<p>年龄 : 57</p>
<p>性别 : 男</p>
<p>方法 : 跳舞( 996不如跳舞…… )</p>
<blockquote>
<p><strong>通过 ==构造函数== 创建对象</strong></p>
</blockquote>
<p>使用场景 : 多个对象有相同的属性和方法的时候 , 我们可以将这些重复的代码封装到一个函数中</p>
<p>这个函数就是 <strong>构造函数</strong></p>
<p>这个函数里面封装的不是普通代码 , 而是对象</p>
<p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> 函数名称(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.属性名 = 属性值;</span><br><span class="line">    <span class="built_in">this</span>.方法名 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>此处使用的 this 关键字代表当前对象 , 因为对象有很多个 , 需要同过this当前值得对象</strong></p>
<p><strong>==构造函数使用注意事项 :==</strong></p>
<p>① 构造函数的名称首字母大写(大驼峰)</p>
<p>② 构造函数不需要写 return </p>
<p>③ 构造函数的调用必须使用 new 关键字</p>
<p>④ 构造函数中属性和方法一定要使用 this 关键字</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Staff</span>(<span class="params">name, gender, yearSalary</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">    <span class="built_in">this</span>.gender = gender;</span><br><span class="line">    <span class="built_in">this</span>.yearSalary = yearSalary;</span><br><span class="line">    <span class="built_in">this</span>.working = <span class="function"><span class="keyword">function</span>(<span class="params">company</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我在&#x27;</span> + company + <span class="string">&#x27;上班......&#x27;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> my = <span class="keyword">new</span> Staff(<span class="string">&#x27;马云&#x27;</span>,<span class="string">&#x27;男&#x27;</span>,<span class="number">1000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(my.name);</span><br><span class="line"><span class="built_in">console</span>.log(my[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line">my.working(<span class="string">&#x27;阿里巴巴&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> mht = <span class="keyword">new</span> Staff(<span class="string">&#x27;马化腾&#x27;</span>,<span class="string">&#x27;男&#x27;</span>,<span class="number">2000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(mht.name);</span><br><span class="line"><span class="built_in">console</span>.log(mht[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line">mht.working(<span class="string">&#x27;腾讯&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> zym = <span class="keyword">new</span> Staff(<span class="string">&#x27;张一鸣&#x27;</span>,<span class="string">&#x27;男&#x27;</span>,<span class="number">10000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(zym.name);</span><br><span class="line"><span class="built_in">console</span>.log(zym[<span class="string">&#x27;name&#x27;</span>]);</span><br><span class="line">zym.working(<span class="string">&#x27;字节跳动&#x27;</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028101848416.png" alt="image-20211028101848416" style="zoom:50%;border: solid" />    

<p><strong>案例 : 通过构造函数完成对英雄人物的创建</strong></p>
<p>构造函数 : Legend()</p>
<p>属性 :</p>
<p>英雄名称 name , 英雄种类 type , 初始血量 hp</p>
<p>方法 : R技能() rSkill</p>
<p>创建三个任意英雄</p>
<h2 id="16-4-new-关键字"><a href="#16-4-new-关键字" class="headerlink" title="16,4 new 关键字"></a>16,4 new 关键字</h2><p>① 在内存中开辟了一个空间 , 用来存放新创建的对象</p>
<p>② 让 this 关键字指向这个对象</p>
<p>③ 执行构造函数中的代码 , 给这个对象添加属性和方法</p>
<p>④ 返回这个新的对象 ( 所以构造函数不需要有返回值的 )</p>
<h2 id="16-5-遍历对象"><a href="#16-5-遍历对象" class="headerlink" title="16,5 遍历对象"></a>16,5 遍历对象</h2><p>使用 <strong>for … in</strong> 语句来遍历对象或者是数组</p>
<p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> 变量 <span class="keyword">in</span> 对象/数组) &#123;</span><br><span class="line">    .....</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>变量对应 对象的属性名, 数组的下标</strong></p>
<p><strong>==变量的命名是自定义 , 一般是 key 或者 k==</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">25</span>,</span><br><span class="line">    <span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span>,</span><br><span class="line">    <span class="attr">address</span>: <span class="string">&#x27;大连&#x27;</span>,</span><br><span class="line">    <span class="attr">job</span>: <span class="string">&#x27;后端研发&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(key + <span class="string">&#x27;:&#x27;</span> + obj[key]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028134427176.png" alt="image-20211028134427176" style="zoom:80%;border: solid" />    



<ul>
<li><strong>for … in</strong> 遍历数组</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">321</span>,<span class="number">54</span>,<span class="number">6</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> index <span class="keyword">in</span> arr) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(index + <span class="string">&#x27;:&#x27;</span> + arr[index]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028134739971.png" alt="image-20211028134739971" style="zoom:67%;border: solid" />    



<h1 id="17-JS-的内置对象"><a href="#17-JS-的内置对象" class="headerlink" title="17, JS 的内置对象"></a>17, JS 的内置对象</h1><p><strong>JS 中有三种对象</strong></p>
<ul>
<li>自定义对象 , 开发人员自己创建的</li>
<li>内置对象</li>
<li>浏览器对象</li>
</ul>
<p><strong>内置对象的最大的优点就是帮助我们快速的完成开发人物</strong></p>
<p>==常用的内置对象 : String , Array . Date ….==</p>
<p>**MDN 文档 : ** <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/">https://developer.mozilla.org/zh-CN/</a></p>
<h2 id="17-1-Math"><a href="#17-1-Math" class="headerlink" title="17,1 Math"></a>17,1 Math</h2><p><strong><code>Math</code></strong> 是一个内置对象，它拥有一些数学属性和数学函数方法。<code>Math</code> 不是一个函数对象。(构造器)</p>
<p>与其他全局对象不同的是，<code>Math</code> 不是一个构造器。</p>
<p>==所谓不是构造器 , 就代表他是可以直接使用的 , 不需要创建对象==</p>
<ul>
<li>操作 Math 的函数和属性</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// max()</span></span><br><span class="line"><span class="comment">// 传入多个数字(正,负)</span></span><br><span class="line"><span class="keyword">var</span> max = <span class="built_in">Math</span>.max(<span class="number">123</span>,<span class="number">45</span>,<span class="number">678</span>,<span class="number">999</span>);</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"><span class="comment">// 如果没有参数</span></span><br><span class="line">max = <span class="built_in">Math</span>.max();</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"><span class="comment">// 传入一个数组</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">12</span>,<span class="number">4</span>,<span class="number">56</span>,<span class="number">32</span>];</span><br><span class="line">max = <span class="built_in">Math</span>.max(...arr);</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"></span><br><span class="line"><span class="comment">// π: PI</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.PI);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028141648481.png" alt="image-20211028141648481" style="zoom:50%;border: solid" />    



<ul>
<li>模拟一个自定义的 Math 对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 封装一个自己的数学对象</span></span><br><span class="line"><span class="keyword">var</span> myMath = &#123;</span><br><span class="line">    <span class="attr">PI</span>: <span class="number">3.14</span>,</span><br><span class="line">    <span class="attr">max</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> max = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">var</span> i <span class="keyword">in</span> <span class="built_in">arguments</span>) &#123;</span><br><span class="line">            <span class="keyword">if</span>(max &lt; <span class="built_in">arguments</span>[i]) &#123;</span><br><span class="line">                max = <span class="built_in">arguments</span>[i];</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> max;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(myMath.PI);</span><br><span class="line"><span class="built_in">console</span>.log(myMath.max(<span class="number">123</span>,<span class="number">45</span>,<span class="number">678</span>,<span class="number">999</span>));</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028141741135.png" alt="image-20211028141741135" style="zoom:67%;border: solid" />    



<h2 id="17-2-Math-中的常用函数"><a href="#17-2-Math-中的常用函数" class="headerlink" title="17,2 Math 中的常用函数"></a>17,2 Math 中的常用函数</h2><ul>
<li><p><strong>abs()</strong></p>
<p>作用 : 取绝对值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;----abs()----&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(-<span class="number">1</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(<span class="number">10.5</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(<span class="string">&#x27;-1&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(<span class="string">&#x27;-10.5&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(<span class="literal">null</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs(<span class="literal">undefined</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.abs());</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028145852563.png" alt="image-20211028145852563" style="zoom:50%;border: solid" />    </li>
</ul>
<ul>
<li><p><strong>JS 的三种取整的方式</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;----Math的三种取整的方式----&#x27;</span>);</span><br><span class="line"><span class="comment">// ceil,floor,round</span></span><br><span class="line"><span class="comment">// 45.9</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.ceil(<span class="number">45.9</span>));<span class="comment">// 46</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.ceil(<span class="number">45.1</span>));<span class="comment">// 46</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.floor(<span class="number">45.9</span>));</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.round(<span class="number">45.9</span>));<span class="comment">// 46</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.round(-<span class="number">1.1</span>));<span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.round(-<span class="number">1.5</span>));<span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.round(-<span class="number">1.9</span>));<span class="comment">// -2</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028145936860.png" alt="image-20211028145936860" style="zoom:50%;border: solid" />    </li>
</ul>
<ul>
<li><strong>random() 获取随机小数</strong></li>
</ul>
<ol>
<li>通过 Math 对象的 random() 函数获取数值 , 0 &lt;= number &lt; 1</li>
<li>这个函数没有参数</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// random()</span></span><br><span class="line"><span class="comment">// 打印一个 &gt;= 0 且 &lt; 1 的随机小数 </span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.random());</span><br><span class="line"><span class="comment">// 获取的是 0 ~ 4之间的整数,不包含4</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">4</span>));</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028150115656.png" alt="image-20211028150115656" style="zoom:67%;border: solid" />    



<p><strong>获取两个整数之间的数字的方法 , 包含最大值和最小值</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义一个函数获取两个整数之间的数字</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">min,max</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 最小值要存在</span></span><br><span class="line">    <span class="comment">// 获取最大值和最小值之间的差</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min + <span class="number">1</span>)) + min;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getRandom(<span class="number">5</span>,<span class="number">10</span>));</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028150207920.png" alt="image-20211028150207920" style="zoom:80%;border: solid" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028150231486.png" alt="image-20211028150231486" style="zoom:80%;border: solid" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028150249467.png" alt="image-20211028150249467" style="zoom:80%;border: solid" />    </p>
<p><strong>案例 : 随机点名</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义一个函数获取两个整数之间的数字</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">min,max</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 最小值要存在</span></span><br><span class="line">    <span class="comment">// 获取最大值和最小值之间的差</span></span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min + <span class="number">1</span>)) + min;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(getRandom(<span class="number">5</span>,<span class="number">10</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 案例: 随机点名</span></span><br><span class="line"><span class="comment">// 定义一个数组保存班级的学员姓名,通过alert()随机点名</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;刘大海&#x27;</span>,<span class="string">&#x27;王大山&#x27;</span>,<span class="string">&#x27;张大江&#x27;</span>,<span class="string">&#x27;林大壮&#x27;</span>];</span><br><span class="line"><span class="comment">// alert(arr[getRandom(0,arr.length - 1)]);</span></span><br><span class="line">alert(arr[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * arr.length)]);</span><br></pre></td></tr></table></figure>



<p><strong>案例 : 猜数字</strong></p>
<p>程序会随机生成 0 ~ 100 之间的数字 , 包含100</p>
<p>如果用户输入的内容 大于数字 , 提示 “大了 , 继续猜”</p>
<p>如果用户输入的内容 小于数字 , 提示 “小了 , 继续猜”</p>
<p>相等 , “恭喜你 , 猜对了!!!!”</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,提示信息</span></span><br><span class="line">alert(<span class="string">&#x27;欢迎来到猜数游戏&#x27;</span>);</span><br><span class="line"><span class="comment">// 2,获得0~100之间的数值</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * <span class="number">101</span>);</span><br><span class="line"><span class="comment">// 3,不知道猜几次</span></span><br><span class="line"><span class="keyword">while</span>(<span class="literal">true</span>) &#123;</span><br><span class="line">    <span class="comment">// 获取用户输入的数字</span></span><br><span class="line">    <span class="keyword">var</span> res = prompt(<span class="string">&#x27;请输入你所猜的数字:&#x27;</span>);</span><br><span class="line">    <span class="comment">// 判断大小</span></span><br><span class="line">    <span class="keyword">if</span> (num &gt; res) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;小了,继续猜&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (res &gt; num) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;大了,继续猜&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        alert(<span class="string">&#x27;恭喜你,猜对了&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="12-3-Date"><a href="#12-3-Date" class="headerlink" title="12,3 Date"></a>12,3 Date</h2><ul>
<li><p><strong>Date 对象的使用</strong></p>
<p>**作用 : ** 创建一个 JavaScript <code>Date</code> 实例，该实例呈现时间中的某个时刻 , 这个对象用于梳理日期和时间的</p>
<p>**注意 : **创建一个新 Date 对象唯一的方式就是 new 操作符</p>
<p>**解释 : **Date() 日期对象 , 是一个构造函数, 必须使用 <strong>new</strong> 关键字来调用日期构造函数创建对象</p>
</li>
</ul>
<blockquote>
<p>代码实例1</p>
<p>如果构造方法中没有参数 , 返回系统时间</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果在构造函数中没有参数,默认返回系统时间</span></span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028155110333.png" alt="image-20211028155110333">    </p>
<blockquote>
<p>代码实例2</p>
<p>数字型参数 : new Date(2021,10,01) , 月份 0 ~ 11</p>
<p>字符串参数 : new Date (‘2021-10-01 09:09:09’) ==常用写法==</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 常用的参数格式</span></span><br><span class="line"><span class="comment">// 数字类型,月份 0 ~ 11</span></span><br><span class="line"><span class="keyword">var</span> date2 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2021</span>,<span class="number">1</span>,<span class="number">01</span>);</span><br><span class="line"><span class="built_in">console</span>.log(date2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串型,此处月份就是写好的数字</span></span><br><span class="line"><span class="keyword">var</span> date3 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&#x27;2021-10-01 09:09:09&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(date3);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028155116821.png" alt="image-20211028155116821">    </p>
<ul>
<li><p><strong>日期的格式化</strong></p>
<p>如果需要让时间按照 2021/10/28 15:15:15</p>
<p>我们需要手动获取</p>
<ul>
<li><p>getFullYear() 获取年份</p>
</li>
<li><p>getMonth() 获取月份 ( 0 ~ 11 )</p>
</li>
<li><p>getDate() 获取当天的日期</p>
</li>
<li><p>getDay() 获取的当天的星期 ( 0日 ~ 6六 )</p>
</li>
<li><p>getHours()  获取当前的小时</p>
</li>
<li><p>getMinutes() 获取当前的分钟</p>
</li>
<li><p>getSeconds() 获取当前的秒钟</p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;年:&#x27;</span> + date.getFullYear());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;月:&#x27;</span> + (date.getMonth() + <span class="number">1</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;日:&#x27;</span> + date.getDate());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;星期:&#x27;</span> + date.getDay());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;小时:&#x27;</span> + date.getHours());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;分钟:&#x27;</span> + date.getMinutes());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;秒钟:&#x27;</span> + date.getSeconds());</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028161646095.png" alt="image-20211028161646095" style="zoom:50%;border: solid" />    



<p><strong>案例 : 需要一个函数,返回当前系统的日期</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	需求: 需要一个函数,返回当前系统的日期</span></span><br><span class="line"><span class="comment">	格式: xxxx年 x月 x日 星期x(一,二,三,四,五,六,日)</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> getDate = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(),</span><br><span class="line">        year = date.getFullYear(),</span><br><span class="line">        month = date.getMonth() + <span class="number">1</span>,</span><br><span class="line">        dates = date.getDate(),</span><br><span class="line">        week = date.getDay(),</span><br><span class="line">        weekArr = [<span class="string">&#x27;日&#x27;</span>,<span class="string">&#x27;一&#x27;</span>,<span class="string">&#x27;二&#x27;</span>,<span class="string">&#x27;三&#x27;</span>,<span class="string">&#x27;四&#x27;</span>,<span class="string">&#x27;五&#x27;</span>,<span class="string">&#x27;六&#x27;</span>];</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;今天是&#x27;</span> + year + <span class="string">&#x27;年&#x27;</span> + month + <span class="string">&#x27;月&#x27;</span> + dates + <span class="string">&#x27;日 &#x27;</span> + <span class="string">&#x27;星期&#x27;</span> + </span><br><span class="line">        weekArr[week];</span><br><span class="line">&#125;</span><br><span class="line">alert(getDate());</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211028161742053.png" alt="image-20211028161742053" style="zoom:60%;border: solid" />    



<ul>
<li><strong>获取当前 / 指定日期时间的毫秒值</strong></li>
</ul>
<p>这个毫秒值是基于 1970 1月 1日开始计算的 , 这个数值我们称之为 <strong>时间戳</strong></p>
<p>可以让我们获取时间的结果更加明确</p>
<blockquote>
<p>两个方法可以获取毫秒值 , <strong>valueOf() , getTime()</strong> , 获得数值距离 1970.01.01 的总毫秒数</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明一个当前的时间变量</span></span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date.valueOf());</span><br><span class="line"><span class="built_in">console</span>.log(date.getTime());</span><br></pre></td></tr></table></figure>



<blockquote>
<p>获取毫秒值 , 最简单的方式 , <strong>最常用的写法</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取毫秒值,时间戳最简单的方式</span></span><br><span class="line"><span class="keyword">var</span> time = +<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(time);</span><br></pre></td></tr></table></figure>



<blockquote>
<p>H5新增的一些方法 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// H5新增一个方法,获得总毫秒数</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Date</span>.now());</span><br></pre></td></tr></table></figure>



<p><strong>案例 : 倒计时</strong></p>
<p>分析:</p>
<ol>
<li><p>**核心的算法 : **指定的时间减去现在的时间的就是剩余的时间 , 但是不能直接用是分秒去相减</p>
</li>
<li><p>通过时间戳 , 用指定时间的毫秒值 - 当前时间的毫秒值  , 就是剩余时间的毫秒值</p>
</li>
<li><p>将剩余的时间转换为 天 , 时 , 分 , 秒</p>
</li>
</ol>
<p>转换的公式</p>
<p>天 = parseInt(总秒数 / 60 / 60 / 24 )</p>
<p>时 = parseInt(总秒数 / 60 / 60 % 24)</p>
<p>分 = parseInt(总秒数 / 60 % 60)</p>
<p>秒 = parseInt(总秒数 % 60)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 案例: 倒计时</span></span><br><span class="line"><span class="comment">// 计算距离下一除夕还有多少天,多少小时,多少分钟,多少秒钟</span></span><br><span class="line"><span class="keyword">var</span> countDown = <span class="function"><span class="keyword">function</span>(<span class="params">time</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 获取当前时间的总毫秒数</span></span><br><span class="line">    <span class="keyword">var</span> nowTime = +<span class="keyword">new</span> <span class="built_in">Date</span>(),</span><br><span class="line">        <span class="comment">// 获取输入的时间的毫秒数</span></span><br><span class="line">        inputTime = +<span class="keyword">new</span> <span class="built_in">Date</span>(time),</span><br><span class="line">        <span class="comment">// 获取两个时间相差的描述</span></span><br><span class="line">        times = (inputTime - nowTime) / <span class="number">1000</span>,</span><br><span class="line">        <span class="comment">// 天数</span></span><br><span class="line">        d =  <span class="built_in">parseInt</span>(times / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>),</span><br><span class="line">        d = d &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + d : d,</span><br><span class="line">        <span class="comment">// 小时</span></span><br><span class="line">        h = <span class="built_in">parseInt</span>(times / <span class="number">60</span> / <span class="number">60</span> % <span class="number">24</span>),</span><br><span class="line">        h = h &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + h : h,</span><br><span class="line">        <span class="comment">// 分钟</span></span><br><span class="line">        m = <span class="built_in">parseInt</span>(times / <span class="number">60</span> % <span class="number">60</span>),</span><br><span class="line">        m = m &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + m : m,</span><br><span class="line">        <span class="comment">// 秒钟</span></span><br><span class="line">        s = <span class="built_in">parseInt</span>(times % <span class="number">60</span>),</span><br><span class="line">        s = s &lt; <span class="number">10</span> ? <span class="string">&#x27;0&#x27;</span> + s : s;</span><br><span class="line">    <span class="keyword">return</span> d + <span class="string">&#x27;天&#x27;</span> + h + <span class="string">&#x27;时&#x27;</span> + m + <span class="string">&#x27;分&#x27;</span> + s + <span class="string">&#x27;秒&#x27;</span>; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h2 id="12-4-Array"><a href="#12-4-Array" class="headerlink" title="12,4 Array"></a>12,4 Array</h2><h3 id="12-4-1-instanceof"><a href="#12-4-1-instanceof" class="headerlink" title="12,4,1 instanceof"></a>12,4,1 <strong>instanceof</strong></h3><p>作用 : 判断变量是否为指定的对象类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [];</span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line"><span class="comment">// 通过instanceof判断两个对象的类型</span></span><br><span class="line"><span class="built_in">console</span>.log(arr <span class="keyword">instanceof</span> <span class="built_in">Array</span>);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(arr <span class="keyword">instanceof</span> <span class="built_in">Object</span>);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(obj <span class="keyword">instanceof</span> <span class="built_in">Array</span>);<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(obj <span class="keyword">instanceof</span> <span class="built_in">Object</span>);<span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>判断对象是否为数组的函数</p>
<p><strong>isArray()</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过isArray() 判断变量是否为数组类型</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.isArray(arr));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.isArray(obj));<span class="comment">// false</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="12-4-2-删除添加数组中的元素"><a href="#12-4-2-删除添加数组中的元素" class="headerlink" title="12,4,2 删除添加数组中的元素"></a>12,4,2 删除添加数组中的元素</h3><ul>
<li>**push(参数1…..) : **向数组的末尾添加一个或者多个元素 , 注意改变原数组 , 返回值返回新数组的长度</li>
<li>**pop() : **删除原数组最后一个元素 , 将数组的长度 - 1 , 没有参数 , 会改变原数组 , 返回数组中被删除的元素</li>
<li>**unshift(参数1….) : **向数组的开头添加一个或者多个元素 , 注意改变原数组 , 返回值返回新数组的长度</li>
<li>**shift() : **删除数组中第一个元素 , 将数组的长度 - 1 , 没有参数 , 会改变原数组 , 返回数组中被删除的元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;======操作数组元素======&#x27;</span>);</span><br><span class="line"><span class="comment">// 通过 push()方法向数组中添加元素</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>],</span><br><span class="line">    len = arr1.push(<span class="number">5</span>,<span class="string">&#x27;张三&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用push后:&#x27;</span> + arr1);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;新数组的长度:&#x27;</span> + len);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过unshift()方法向数组中添加元素</span></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line">len2 = arr2.unshift(<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用unshift后:&#x27;</span> + arr2);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;新数组的长度:&#x27;</span> + len2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过pop,shift删除数组中的元素</span></span><br><span class="line"><span class="keyword">var</span> arr3 = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;冯七&#x27;</span>];</span><br><span class="line"><span class="comment">// 删除末尾</span></span><br><span class="line"><span class="keyword">var</span> del1 = arr3.pop();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用pop后:&#x27;</span> + arr3);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;删除的元素:&#x27;</span> + del1);</span><br><span class="line"><span class="comment">// 删除开头</span></span><br><span class="line"><span class="keyword">var</span> del2 = arr3.shift();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用shift后:&#x27;</span> + arr3);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;删除的元素:&#x27;</span> + del2);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029100400554.png" alt="image-20211029100400554" style="zoom: 67%;border: solid" />    



<p><strong>案例 : 声明一个新的数组容器,将这个数组中大于10的元素存入新数组中</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	var arr = [2,0,6,7,53,25,7,18,6];</span></span><br><span class="line"><span class="comment">	声明一个新的数组容器,将这个数组中大于10的元素存入新数组中</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">53</span>,<span class="number">25</span>,<span class="number">7</span>,<span class="number">18</span>,<span class="number">6</span>],</span><br><span class="line">    newArr = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> arr) &#123;</span><br><span class="line">    <span class="keyword">if</span>(arr[k] &gt; <span class="number">10</span>) &#123;</span><br><span class="line">        newArr.push(arr[k]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;newArr:&#x27;</span> + newArr);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029100628073.png" alt="image-20211029100628073" style="zoom:67%;border: solid" />    



<h3 id="12-4-3-数组的排序"><a href="#12-4-3-数组的排序" class="headerlink" title="12,4,3 数组的排序"></a>12,4,3 数组的排序</h3><ul>
<li>**reverse() : **反转数组</li>
<li>**sort() : **将元素转换为字符串，然后比较它们的UTF-16代码单元值排序</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过reverse对原数组进行反转</span></span><br><span class="line"><span class="keyword">var</span> arr4 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用reverse之前:&#x27;</span> + arr4);</span><br><span class="line">arr4.reverse();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用reverse之后:&#x27;</span> + arr4);</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过sort对数组元素进行排序</span></span><br><span class="line"><span class="keyword">var</span> arr5 = [<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">53</span>,<span class="number">25</span>,<span class="number">7</span>,<span class="number">18</span>,<span class="number">6</span>];</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用sort之前:&#x27;</span> + arr5);</span><br><span class="line">arr5.sort();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用sort之后:&#x27;</span> + arr5);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029101554254.png" alt="image-20211029101554254" style="zoom:67%;border: solid" />    



<blockquote>
<p>通过 sort 实现升序和降序的方式</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用srot升序排序</span></span><br><span class="line">arr5.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a - b;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用sort升序排序:&#x27;</span> + arr5);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用srot降序排序</span></span><br><span class="line">arr5.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> b - a;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;使用sort降序排序:&#x27;</span> + arr5);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029101640876.png" alt="image-20211029101640876" style="zoom:67%;border: solid" />    



<h3 id="12-4-4-获取数组中元素的索引"><a href="#12-4-4-获取数组中元素的索引" class="headerlink" title="12,4,4 获取数组中元素的索引"></a>12,4,4 获取数组中元素的索引</h3><ul>
<li>**indexOf() : **在数组中查找对应的元素第一次出现的位置 , 如果不存在返回 -1. </li>
<li>**lastIndexOf() : **在数组中查找对应的元素最后一次出现的位置 , 如果不存在返回 -1. </li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr6 = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;冯七&#x27;</span>];</span><br><span class="line"><span class="comment">// 通过indexOf()查找对应的元素</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;王五所在索引:&#x27;</span> + arr6.indexOf(<span class="string">&#x27;王五&#x27;</span>));<span class="comment">// 2</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;刘八所在索引:&#x27;</span> + arr6.indexOf(<span class="string">&#x27;刘八&#x27;</span>));<span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr6 = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;冯七&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>];</span><br><span class="line"><span class="comment">// 通过lstIndexOf()查找对应的元素</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;王五所在索引:&#x27;</span> + arr6.lastIndexOf(<span class="string">&#x27;赵六&#x27;</span>));<span class="comment">// 6</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;刘八所在索引:&#x27;</span> + arr6.lastIndexOf(<span class="string">&#x27;刘八&#x27;</span>));<span class="comment">// -1</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029102635701.png" alt="image-20211029102635701" style="zoom:67%;border: solid" />    



<p><strong>案例 : 对数组进行元素的去重操作</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr7 = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;冯七&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>];</span><br><span class="line"><span class="comment">// 声明一个函数用于对数组元素的去重,返回新数组</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique</span>(<span class="params">arr</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> newArr = [];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> arr) &#123;</span><br><span class="line">        <span class="comment">// 判断加入新数组的元素,是否已经存在</span></span><br><span class="line">        <span class="keyword">if</span>(newArr.indexOf(arr[k]) == -<span class="number">1</span>) &#123;</span><br><span class="line">            newArr.push(arr[k]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> newArr;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(unique(arr7));</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029134929731.png" alt="image-20211029134929731">    </p>
<h3 id="12-4-5-数组转化字符串"><a href="#12-4-5-数组转化字符串" class="headerlink" title="12,4,5 数组转化字符串"></a>12,4,5 数组转化字符串</h3><ul>
<li>**toString() : **将数组元素转换为字符串 , 每个元素使用英文逗号进行链接</li>
<li>**join(‘分隔符’) : **将数组元素转换为字符串 , 每个元素使用指定的分隔符进行链接进行链接</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr8 = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>,<span class="string">&#x27;王五&#x27;</span>,<span class="string">&#x27;赵六&#x27;</span>,<span class="string">&#x27;冯七&#x27;</span>];</span><br><span class="line"><span class="comment">// 使用toString 函数将数组转换为字符串</span></span><br><span class="line"><span class="keyword">var</span> strArr1 = arr8.toString();</span><br><span class="line"><span class="built_in">console</span>.log(strArr1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 join 函数将数组中的元素进行链接</span></span><br><span class="line"><span class="keyword">var</span> strArr2 = arr8.join(<span class="string">&#x27;@&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(strArr2);</span><br><span class="line"><span class="keyword">var</span> strArr3 = arr8.join(<span class="string">&#x27;|&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(strArr3);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029135505083.png" alt="image-20211029135505083" style="zoom: 67%;border: solid" />    



<h3 id="12-4-6-数组的其他的方法"><a href="#12-4-6-数组的其他的方法" class="headerlink" title="12,4,6 数组的其他的方法"></a>12,4,6 数组的其他的方法</h3><ul>
<li>**concat(arr1, arr2,…) : **将一个或者多个数组拼接在一起</li>
<li>**splice(arg1 , arg2 , arg3 …..) : **可以在指定位置对数组的元素进行添加或者删除的操作</li>
<li>**slice(start , end) : **截取数组</li>
</ul>
<blockquote>
<p>代码实例 : concat</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> parents = [<span class="string">&#x27;张大海&#x27;</span>,<span class="string">&#x27;王大山&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> children = [<span class="string">&#x27;张铁蛋&#x27;</span>,<span class="string">&#x27;王大锤&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> brother = [<span class="string">&#x27;张三&#x27;</span>,<span class="string">&#x27;李四&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> family = parents.concat(children, brother);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;进行拼接后的family:&#x27;</span> + family);</span><br><span class="line"><span class="built_in">console</span>.log(family);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029141807620.png" alt="image-20211029141807620" style="zoom:67%;border: solid" />    



<blockquote>
<p>代码实例 : splice</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// splice(arg1 , arg2 , arg3 .....)对数组的元素进行操作</span></span><br><span class="line"><span class="comment">// arg1:操作数组的索引位置,从那个位置开始添加 / 删除</span></span><br><span class="line"><span class="comment">// arg2:删除几个,可以为0,代表删除0个元素,即不删除任何元素进行添加操作</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="string">&#x27;Tom&#x27;</span>,<span class="string">&#x27;Jerry&#x27;</span>,<span class="string">&#x27;Alex&#x27;</span>,<span class="string">&#x27;Amy&#x27;</span>];</span><br><span class="line"><span class="comment">// 添加操作</span></span><br><span class="line"><span class="comment">// 在Jerry后面添加, Sanford, Fort</span></span><br><span class="line"><span class="comment">// Jerry索引位置为1,其后为2</span></span><br><span class="line">arr1.splice(<span class="number">2</span>,<span class="number">0</span>,<span class="string">&#x27;Sanford&#x27;</span>, <span class="string">&#x27;Fort&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr1);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="string">&#x27;Tom&#x27;</span>,<span class="string">&#x27;Jerry&#x27;</span>,<span class="string">&#x27;Alex&#x27;</span>,<span class="string">&#x27;Amy&#x27;</span>];</span><br><span class="line"><span class="comment">// 删除操作</span></span><br><span class="line"><span class="comment">// 删除Jerry后面的 Alex</span></span><br><span class="line"><span class="comment">// Alex索引位置为2</span></span><br><span class="line">arr2.splice(<span class="number">2</span>,<span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr2);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr3 = [<span class="string">&#x27;Tom&#x27;</span>,<span class="string">&#x27;Jerry&#x27;</span>,<span class="string">&#x27;Alex&#x27;</span>,<span class="string">&#x27;Amy&#x27;</span>];</span><br><span class="line">arr3.splice(<span class="number">1</span>,<span class="number">1</span>,<span class="string">&#x27;Lee&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr3);</span><br></pre></td></tr></table></figure>



<blockquote>
<p>代码实例 : slice</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// slice(start ,end)</span></span><br><span class="line"><span class="comment">// start: 数组的索引, 从那个位置开始截取数组</span></span><br><span class="line"><span class="comment">//		  如果start数值为 负数,就会从数组的尾部开始计算位置</span></span><br><span class="line"><span class="comment">//		  slice(-2)代表从数组中倒数第2个开始截取,截取到最后一个</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 测试 slice 一个参数的情况</span></span><br><span class="line"><span class="keyword">var</span> arr4 = [<span class="string">&#x27;Tom&#x27;</span>,<span class="string">&#x27;Jerry&#x27;</span>,<span class="string">&#x27;Alex&#x27;</span>,<span class="string">&#x27;Amy&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> res1 = arr4.slice(<span class="number">2</span>);<span class="comment">// 索引位置为2截取至最后一个</span></span><br><span class="line"><span class="built_in">console</span>.log(res1);</span><br><span class="line"><span class="keyword">var</span> res2 = arr4.slice(-<span class="number">2</span>);<span class="comment">// 倒数第二个截取至最后一</span></span><br><span class="line"><span class="built_in">console</span>.log(res2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// end: 规定截取结束的位置,指定截取结束至下标元素之前</span></span><br><span class="line"><span class="comment">//      如果参数值为负数,就会从数组的尾部开始计算位置</span></span><br><span class="line"><span class="comment">//		slice(-3,-1)代表从数组的倒数第3个开始截取,截取至倒数第一个之前</span></span><br><span class="line"><span class="keyword">var</span> arr5 = [<span class="string">&#x27;Tom&#x27;</span>,<span class="string">&#x27;Jerry&#x27;</span>,<span class="string">&#x27;Alex&#x27;</span>,<span class="string">&#x27;Amy&#x27;</span>];</span><br><span class="line"><span class="keyword">var</span> res3 = arr5.slice(<span class="number">1</span>,<span class="number">3</span>);<span class="comment">// 截取下标 1,2元素</span></span><br><span class="line"><span class="built_in">console</span>.log(res3);</span><br><span class="line"><span class="keyword">var</span> res4 = arr5.slice(-<span class="number">3</span>,-<span class="number">1</span>);<span class="comment">// 截取下标 1,2元素</span></span><br><span class="line"><span class="built_in">console</span>.log(res4);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029144305678.png" alt="image-20211029144305678" style="zoom:50%;border: solid" />    





<h2 id="12-5-String"><a href="#12-5-String" class="headerlink" title="12,5 String"></a>12,5 String</h2><h3 id="12-5-1-基本包装类型"><a href="#12-5-1-基本包装类型" class="headerlink" title="12,5,1 基本包装类型"></a>12,5,1 基本包装类型</h3><p>在之前学习过程中 , 通过字符串的length 获取自身的长度 , 字符串一个基本数据类型</p>
<p>问 : 为什么String的变量作为基本数据类型会有属性 ? </p>
<p>JS 会对 String 类型的变量进行包装 , 将基本数据类型 , 包装成复杂数据类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;abc&#x27;</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">JS 内部操作</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1,将简单数据类型装换为复杂数据类型</span></span><br><span class="line"><span class="keyword">var</span> temp = <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">&#x27;abc&#x27;</span>);</span><br><span class="line"><span class="comment">// 2,将转换好的复杂数据类型的字符串赋值原先的变量</span></span><br><span class="line"><span class="keyword">var</span> str = temp;</span><br><span class="line"><span class="comment">// 3,销毁这个临时变量</span></span><br><span class="line">temp = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>

<p><strong>在 JS 中还有三种基本包装类型 : Number , String , Boolean</strong></p>
<h3 id="12-5-2-字符串是不可变得"><a href="#12-5-2-字符串是不可变得" class="headerlink" title="12,5,2 字符串是不可变得"></a>12,5,2 字符串是不可变得</h3><p>所谓的不可边是的是数值是不会改变的 , 虽然看上去内容变换了 , 但是是地址的变换 , 在内存中开辟了新的空间</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str);<span class="comment">// 张三</span></span><br><span class="line">str = <span class="string">&#x27;李四&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str);<span class="comment">// 李四</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029145313407.png" alt="image-20211029145313407" style="zoom:67%;border: solid" />    

<p><strong>注意 : 不要对字符串进行大量的拼接和更新操作 , 因为会产生大量的字符出现在内存中</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>; i &lt;= <span class="number">100000000</span>; i++) &#123;</span><br><span class="line">    str += i;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(str);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029150223086.png" alt="image-20211029150223086">    </p>
<h3 id="12-5-3-字符串中的方法"><a href="#12-5-3-字符串中的方法" class="headerlink" title="12,5,3 字符串中的方法"></a>12,5,3 字符串中的方法</h3><p><strong>==字符串的所有的方法 , 都不会改变字符串本身 , 而是在经过操作之后返回了一个新的字符串==</strong></p>
<ul>
<li>**indexOf() : **返回指定内容在原字符串中的第一次出现位置 , 如果不存在返回 -1</li>
<li>**lastIndexOf() : **回指定内容在原字符串中的最后一次出现位置 , 如果不存在返回 -1</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;一二三四五,上山打老虎.&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">&#x27;老&#x27;</span>));<span class="comment">// 9</span></span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">&#x27;五&#x27;</span>,<span class="number">5</span>));<span class="comment">// -1</span></span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">&#x27;六&#x27;</span>));<span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;一二三四五,五四三二一&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.lastIndexOf(<span class="string">&#x27;五&#x27;</span>));<span class="comment">// 6</span></span><br><span class="line"><span class="built_in">console</span>.log(str.lastIndexOf(<span class="string">&#x27;6&#x27;</span>));<span class="comment">// -1</span></span><br></pre></td></tr></table></figure>



<p><strong>案例 : 操作一个指定的字符串 var str = ‘odssoaodogohhooa’; 判断o一共出现了几次?</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	需求: 操作一个指定的字符串</span></span><br><span class="line"><span class="comment">	var str = &#x27;odssoaodogohhooa&#x27;;</span></span><br><span class="line"><span class="comment">	判断o一共出现了几次?</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;odssoaodogohhooa&#x27;</span>;</span><br><span class="line"><span class="comment">// 1,获取&#x27;o&#x27;第一次出现的位置</span></span><br><span class="line"><span class="keyword">var</span> index = str.indexOf(<span class="string">&#x27;o&#x27;</span>);</span><br><span class="line"><span class="comment">// 2,声明一个变量用于计数</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span>(index != -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="comment">//console.log</span></span><br><span class="line">    <span class="built_in">console</span>.log(index);</span><br><span class="line">    num ++;</span><br><span class="line">    <span class="comment">// 将index更新即这个索引位置开始下一次查找的位置</span></span><br><span class="line">    index = str.indexOf(<span class="string">&#x27;o&#x27;</span>,index + <span class="number">1</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;o一共出现了:&#x27;</span> + num + <span class="string">&#x27;次&#x27;</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029152708231.png" alt="image-20211029152708231" style="zoom:80%;border: solid" />    



<ul>
<li><strong>charAt(index) :</strong> 返回指定索引位置的字符串</li>
<li>**charCodeAt(index) : **获取指定位置的字符的ASCII码</li>
<li>**str[index] : **获取指定位置的字符串中的字符</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过charAt()获取对应字符的位置</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;一条大河波浪宽&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.charAt(<span class="number">4</span>));<span class="comment">// 波</span></span><br><span class="line"><span class="comment">// 遍历字符串</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; str.length; i++) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(str.charAt(i));</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;asdfghj&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.charCodeAt(<span class="number">2</span>));<span class="comment">// 100</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;一条大河波浪宽&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str[<span class="number">4</span>]);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> str) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(str[k]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>案例 : 在以下这个字符串中每个字符出现了多少次</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	在以下这个字符串中每个字符出现了多少次</span></span><br><span class="line"><span class="comment">	字符 =&gt; 次数 ? 对象</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;odssoaodogohhooaadfasdfa&#x27;</span>;</span><br><span class="line"><span class="comment">// 1,声明一个对象来装每一个字符以及对应的数量</span></span><br><span class="line"><span class="keyword">var</span> o = &#123;&#125;;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> str) &#123;</span><br><span class="line">    <span class="comment">// 2,获取字符串中每一个元素</span></span><br><span class="line">    <span class="keyword">var</span> char = str[k];</span><br><span class="line">    <span class="comment">// 3,将对应的字符设置为o对象的属性,判断改属性是否已被赋值</span></span><br><span class="line">    <span class="keyword">if</span> (o[char]) &#123;</span><br><span class="line">        o[char] ++;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;<span class="comment">// 当前对象中在属性还未赋值</span></span><br><span class="line">        o[char] = <span class="number">1</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(o);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211029161349103.png" alt="image-20211029161349103" style="zoom:67%;" />    



<h3 id="12-5-4-字符串中的操作方法"><a href="#12-5-4-字符串中的操作方法" class="headerlink" title="12,5,4 字符串中的操作方法"></a>12,5,4 字符串中的操作方法</h3><ul>
<li><p>**concat(str1,str2,str3,…..) : **用于字符串的链接 , 拼接字符串 , 相当于 +</p>
</li>
<li><p>**substr(start,length) : **从start索引位置开始截取 , length 截取的个数</p>
</li>
<li><p>**slice(start, end) : **从start开始截取 , 截取到 end 之前 , 不包括end位置的元素</p>
</li>
<li><p>**substring(start,end) : **从start开始截取 , 截取到 end 之前 , 不包括end位置的元素 , 但是不接受负值</p>
</li>
<li><p>**replace(str, newStr) : **替换字符 , ==只会替换一个==</p>
</li>
<li><p><strong>split(str) / split(str,length) :</strong> 参数一 , 按照这个字符进行分组 , 参数二 , 按照参数一分组 , 取前几组</p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过concat对字符串进行拼接的操作</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> newStr = str.concat(<span class="string">&#x27;李四&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newStr);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过substr截取字符串</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;北国风光,千里冰封,万里雪飘.&#x27;</span></span><br><span class="line"><span class="keyword">var</span> newStr1 = str.substr(str.indexOf(<span class="string">&#x27;千&#x27;</span>),<span class="number">4</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newStr1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过slice来截取字符</span></span><br><span class="line"><span class="keyword">var</span> newStr2 = str.slice(str.indexOf(<span class="string">&#x27;千&#x27;</span>),str.lastIndexOf(<span class="string">&#x27;,&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(newStr2);</span><br><span class="line"><span class="comment">// 截取万里雪飘</span></span><br><span class="line"><span class="keyword">var</span> newStr3 = str.slice(-<span class="number">5</span>,-<span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newStr3);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过substring截取字符串,截取万里雪飘</span></span><br><span class="line"><span class="keyword">var</span> newStr4 = str.substring(str.indexOf(<span class="string">&#x27;万&#x27;</span>),str.length - <span class="number">1</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newStr4);</span><br><span class="line"><span class="keyword">var</span> newStr5 = str.substring(str.indexOf(<span class="string">&#x27;万&#x27;</span>));<span class="comment">// 一直截取到最后一个</span></span><br><span class="line"><span class="built_in">console</span>.log(newStr5);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> newStr6 = str.replace(<span class="string">&#x27;,&#x27;</span>,<span class="string">&#x27;|&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newStr6);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过split将字符串分割成一个数组</span></span><br><span class="line"><span class="keyword">var</span> newArr1 = str.split(<span class="string">&#x27;,&#x27;</span>);<span class="comment">// 将字符串根据&#x27;,&#x27;进行分割</span></span><br><span class="line"><span class="built_in">console</span>.log(newArr1);</span><br><span class="line"><span class="keyword">var</span> newArr2 = str.split(<span class="string">&#x27;,&#x27;</span>,<span class="number">2</span>);</span><br><span class="line"><span class="built_in">console</span>.log(newArr2);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101091312777.png" alt="image-20211101091312777" style="zoom:50%;border: solid" />    



<ul>
<li><strong>大小写转换函数</strong><ul>
<li>**toUpperCase() : **将字符串中的英文字母转换为大写</li>
<li>**toLowerCase() : **将字符串中的英文字母转换为小写</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;Hello,World!!&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;转换为大写:&#x27;</span> + str.toUpperCase());</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;转换为小写:&#x27;</span> + str.toLowerCase());</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101091729835.png" alt="image-20211101091729835" style="zoom:67%;border: solid" />    





<h2 id="12-6-正则表达式"><a href="#12-6-正则表达式" class="headerlink" title="12,6 正则表达式"></a>12,6 正则表达式</h2><h3 id="12-6-1-正则表达式概述"><a href="#12-6-1-正则表达式概述" class="headerlink" title="12,6,1 正则表达式概述"></a>12,6,1 正则表达式概述</h3><p><strong>作用 : 用于定义字符串的一些规则</strong></p>
<p>用来检查一个字符串是否符合规则</p>
<p>我们将正则表达式写好 , 给计算机看 , 由计算机判断</p>
<p>==正则表达式的本质就是一个对象==</p>
<p>**语法 : **</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;参数1&#x27;</span>,<span class="string">&#x27;参数2&#x27;</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>参数1 : 正则表达式</li>
<li>参数2 : 匹配模式</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个正则表达式</span></span><br><span class="line"><span class="comment">// 全称: RegularExpression</span></span><br><span class="line"><span class="comment">// 这个正则表达式可以检查一个字符串中是否包含 a 字符</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(reg);</span><br><span class="line"><span class="comment">// 通过 typeof 检查正则表达式</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> reg);<span class="comment">// object		</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101094431334.png" alt="image-20211101094431334">    </p>
<ul>
<li>使用正则表达式检查字符串是否正确<ul>
<li>使用 test() 函数 , 如果字符串符合规范返回 true , 反之返回 false</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// test(): 可以检查一个字符串是否付合正则表达式的规则</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;a&#x27;</span>;</span><br><span class="line"><span class="comment">// 使用 reg 对象 检查 str , 是否符合标准</span></span><br><span class="line"><span class="comment">// 符合 test() 返回 true, 反之 返回false</span></span><br><span class="line"><span class="keyword">var</span> flag = reg.test(str);</span><br><span class="line"><span class="built_in">console</span>.log(flag);<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;asdfg&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101094547289.png" alt="image-20211101094547289">    </p>
<ul>
<li><p>参数2 : 匹配模式</p>
<ul>
<li><p>**i : **忽略大小写</p>
</li>
<li><p>**g : **全局匹配模式</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这个正则表达式判断字符串中是否包含 e</span></span><br><span class="line"><span class="comment">// 条件: i,忽略字符内容大小写</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;e&#x27;</span>,<span class="string">&#x27;i&#x27;</span>),</span><br><span class="line">    str = <span class="string">&#x27;AsdQWErt&#x27;</span>,</span><br><span class="line">    bool = reg.test(str);<span class="comment">// 调整匹配模式,true</span></span><br><span class="line"><span class="built_in">console</span>.log(bool);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101095054739.png" alt="image-20211101095054739">    </p>
<h3 id="12-6-2-正则表达式修饰符和"><a href="#12-6-2-正则表达式修饰符和" class="headerlink" title="12,6,2 正则表达式修饰符和 []"></a>12,6,2 正则表达式修饰符和 []</h3><ul>
<li><strong>使用正则表达式的字面来创建对象</strong></li>
<li><strong>正则表达式的修饰符 (匹配模式)</strong><ul>
<li>**i : **执行对大小写不敏感的匹配</li>
<li>**g : **执行全局匹配 , 查找一个字符串整体的内容 , 而不是匹配到第一个就结束检查 </li>
</ul>
</li>
</ul>
<p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="regexp">/正则表达式/</span>匹配模式;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用字面量创建正则表达式</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/a/i</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> reg);</span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;Abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;bcd&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p><strong>构造函数和字面量的特点</strong></p>
<ol>
<li><p>使用字面量创建更加简单</p>
</li>
<li><p>使用构造函数方式创建更加灵活</p>
<p><strong>new RegExp(arg1 , arg2), arg1可以是变量</strong> </p>
</li>
</ol>
<ul>
<li>使用 “ <strong>|</strong> “ 表示或者的意思</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/a|b/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;bcd&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg.test(<span class="string">&#x27;cde&#x27;</span>));<span class="comment">// false</span></span><br></pre></td></tr></table></figure>



<ul>
<li>使用 <strong>[a - z]</strong> 代表任意小写字母 , 使用 <strong>[A - Z]</strong> 代表任意大写字母 , 使用 <strong>[A - z]</strong> 代表任意字母</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	[] 里面的内容也是或者</span></span><br><span class="line"><span class="comment">	[ab] 相当于 a|b</span></span><br><span class="line"><span class="comment">	[a-z] 任意小写字母</span></span><br><span class="line"><span class="comment">	[A-Z] 任意大写字母</span></span><br><span class="line"><span class="comment">	[A-z] 任意字母</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/[ed]/</span>;<span class="comment">// e|d</span></span><br><span class="line"><span class="built_in">console</span>.log(reg1.test(<span class="string">&#x27;1234&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg1.test(<span class="string">&#x27;Element&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg1.test(<span class="string">&#x27;divr&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/[a-z]/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="string">&#x27;asdfsdf&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="string">&#x27;ASJHFGJ&#x27;</span>));<span class="comment">// false,大写无效 </span></span><br></pre></td></tr></table></figure>



<p>==检查一个字符串中是否包含 , abc , adc 或者 aec==</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 a 和 c 之间的一个字符可能是 b 或者 d ,e</span></span><br><span class="line"><span class="comment">// [bde]代表一个字符</span></span><br><span class="line"><span class="keyword">var</span> reg3 = <span class="regexp">/a[bde]c/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;adc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;aec&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;afc&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;abec&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;qwaeczxc&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>使用[^ ]表示除了,代表不查找放括号中的字符</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用[^ ]表示除了,代表不查找放括号中的字符</span></span><br><span class="line"><span class="comment">// 标准: 字符串不可以包含 a 或者 b</span></span><br><span class="line"><span class="keyword">var</span> reg4 = <span class="regexp">/[^ab]/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;a&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;b&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;ab&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;qwer&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>使用[0-9]表示任意数字</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用[0-9]表示任意数字</span></span><br><span class="line"><span class="keyword">var</span> reg5 = <span class="regexp">/[0-9]/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="string">&#x27;132&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="keyword">var</span> reg6 = <span class="regexp">/[^0-9]/</span>;<span class="comment">// 检测是否不含数字字符</span></span><br><span class="line"><span class="built_in">console</span>.log(reg6.test(<span class="string">&#x27;132&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg6.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<h3 id="12-6-3-字符串和正则表达式的函数"><a href="#12-6-3-字符串和正则表达式的函数" class="headerlink" title="12,6,3 字符串和正则表达式的函数"></a>12,6,3 字符串和正则表达式的函数</h3><ul>
<li>**search() : **检索与正则表达式匹配的值</li>
<li>**match() : **找到一个或者多个与正则表达式匹配的值</li>
<li>**replace() : **替换和正则表达式匹配的字符</li>
<li>**split() : **根据正则表达式中的内容将字符串分割城数组</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<ul>
<li>split</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 split() 将字符串分割城数组</span></span><br><span class="line"><span class="comment">// 按照字符内容分割,讲数组存入数组中</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;1a2b3c4d5e6f7&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> arrNum = str.split(<span class="regexp">/[A-z]/</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arrNum);</span><br><span class="line"><span class="keyword">var</span> arrChar = str.split(<span class="regexp">/[0-9]/</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arrChar);</span><br></pre></td></tr></table></figure>



<ul>
<li>search</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	search()</span></span><br><span class="line"><span class="comment">	作用: 搜索字符串中是否包含指定的内容</span></span><br><span class="line"><span class="comment">	如果搜索到,返回第一次出现的下标,如果没有返回-1</span></span><br><span class="line"><span class="comment">	可以接收正则表达式作为参数,根据正则的内容进行检索</span></span><br><span class="line"><span class="comment">	注意: search 之会返回查到的第一个,即使设置全局也是没用的</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;hello abc hello adc hello aec&#x27;</span>;</span><br><span class="line"><span class="comment">// 搜索 abc , adc 或者 aec</span></span><br><span class="line"><span class="keyword">var</span> res1 = str.search(<span class="regexp">/a[dbe]c/</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res1);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101140321300.png" alt="image-20211101140321300">    </p>
<ul>
<li>match</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	match()</span></span><br><span class="line"><span class="comment">	可以根据正则表达式,从一个字符串中间符合条件的内容提取出来</span></span><br><span class="line"><span class="comment">	默认情况下只会将第一个符合条件找到,找到后就停止</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;1a2b3c4d5e6f7A8B9C0&#x27;</span>;</span><br><span class="line"><span class="comment">// 将所有的英文字符全部取出</span></span><br><span class="line"><span class="comment">// 设定匹配模式为全局模式,将所有的字符全部匹配</span></span><br><span class="line"><span class="keyword">var</span> res2 = str.match(<span class="regexp">/[A-z]/g</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res2);</span><br><span class="line"><span class="comment">// gi: 表示进行全局匹配,并忽略大小写,i和g的顺序无所谓</span></span><br><span class="line"><span class="keyword">var</span> res3 = str.match(<span class="regexp">/[a-z]/gi</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res3);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101140334420.png" alt="image-20211101140334420">    </p>
<ul>
<li>replace</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	replace()</span></span><br><span class="line"><span class="comment">	将字符串中的内容替换为新的内容</span></span><br><span class="line"><span class="comment">	参数1:被替换的内容,可以接收一个正则表达式</span></span><br><span class="line"><span class="comment">	参数2:替换的新内容</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;1a2b3c4d5e6f7A8B9C0&#x27;</span>;</span><br><span class="line"><span class="comment">// 将所有的字母全部替换为 @</span></span><br><span class="line"><span class="keyword">var</span> res1 = str.replace(<span class="regexp">/[a-z]/gi</span>,<span class="string">&#x27;@&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res1);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101140721532.png" alt="image-20211101140721532">    </p>
<h3 id="12-6-4-正则表达式量词"><a href="#12-6-4-正则表达式量词" class="headerlink" title="12,6,4 正则表达式量词"></a>12,6,4 正则表达式量词</h3><ul>
<li>**n+ : **匹配任何包含至少一个 n 的  字符串</li>
<li><em><em>n</em> :</em>* 匹配任何包含零个或多个 n 的  字符串</li>
<li><strong>n? :</strong> 匹配任何包含零个或一个 n 的  字符串</li>
<li>**n{x} : **匹配包含 x 个 n 的字符串</li>
<li>**n{x,} : **x是一个正整数 , 连续出现至少 x 个 n 的时候匹配</li>
<li>**n{x,y} : **x 和 y 都是正整数 , 连续出现至少 x 次 , 最多不超过 y 次 , 匹配</li>
<li>**n$ : **匹配任意结尾为 n 的字符串</li>
<li>**^n : **匹配任意开头为 n 的字符串</li>
</ul>
<blockquote>
<p><strong>n{x} , n{x,y} , n{x,}</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// &#123;n&#125;正好出现n次</span></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">&#x27;aaa&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/a&#123;3&#125;/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg1.test(str1));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str2 = <span class="string">&#x27;ababab&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str3 = <span class="string">&#x27;abbb&#x27;</span>;</span><br><span class="line"><span class="comment">// 代表内容 一个a 和 三个b</span></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/ab&#123;3&#125;/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(str2));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(str3));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#123;n,m&#125;出现 n 到 m 次</span></span><br><span class="line"><span class="keyword">var</span> str4 = <span class="string">&#x27;qaaaaac&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> reg4 = <span class="regexp">/qa&#123;3,5&#125;c/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(str4));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#123;n,&#125;出现至少n次,n次以上</span></span><br><span class="line"><span class="keyword">var</span> reg5 = <span class="regexp">/a&#123;3,&#125;/</span>;</span><br><span class="line"><span class="keyword">var</span> str5 = <span class="string">&#x27;safaaa&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> str6 = <span class="string">&#x27;safa&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(str5));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(str6));<span class="comment">// false,不足3次</span></span><br></pre></td></tr></table></figure>



<blockquote>
<p><strong>+ , * , ? , ^ , $</strong></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// *:匹配0个或者多个,相当于&#123;0,&#125;</span></span><br><span class="line"><span class="keyword">var</span> reg7 = <span class="regexp">/ab*c/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg7.test(<span class="string">&#x27;ac&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg7.test(<span class="string">&#x27;abbbbbbc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ?:代表一个或者0个,相当于&#123;0,1&#125;</span></span><br><span class="line"><span class="keyword">var</span> reg8 = <span class="regexp">/ab?c/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;ac&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;abbbbbbc&#x27;</span>));<span class="comment">// false,b超过1个了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ^:表示开头</span></span><br><span class="line"><span class="keyword">var</span> reg9 = <span class="regexp">/^a/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg9.test(<span class="string">&#x27;bcd&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg9.test(<span class="string">&#x27;asdfg&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// $:表示结尾</span></span><br><span class="line"><span class="keyword">var</span> reg10 = <span class="regexp">/a$/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg10.test(<span class="string">&#x27;abcd&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg10.test(<span class="string">&#x27;zxdfgsafa&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在正则表达式中同时使用 ^ $ 要求字符串必须完全符合正则表达式</span></span><br><span class="line"><span class="keyword">var</span> reg11 = <span class="regexp">/^abc$/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg11.test(<span class="string">&#x27;aabcdd&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg11.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<p><strong>==以a开头或者以a结尾==</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 问题:以a开头,以a结尾</span></span><br><span class="line"><span class="keyword">var</span> reg12 = <span class="regexp">/^a|a$/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg12.test(<span class="string">&#x27;ab&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg12.test(<span class="string">&#x27;ba&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg12.test(<span class="string">&#x27;aadfasdfa&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li><strong>案例</strong> : 验证手机号</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	根据用户输入的手机号,验证手机号是否可用</span></span><br><span class="line"><span class="comment">	手机号的规则:11位数组</span></span><br><span class="line"><span class="comment">	1)1开头</span></span><br><span class="line"><span class="comment">	2)第二位3~9任意数字</span></span><br><span class="line"><span class="comment">	3)第3味以后任意数字,长度为9</span></span><br><span class="line"><span class="comment">	语法: ^1	 [3-9] [0-9]&#123;9&#125;$</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> phoneStr = prompt(<span class="string">&#x27;请输入手机号:&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> phoneReg = <span class="regexp">/^1[3-9][0-9]&#123;9&#125;$/</span>;</span><br><span class="line"><span class="keyword">if</span>(phoneReg.test(phoneStr)) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;手机号正确!&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    alert(<span class="string">&#x27;手机号格式错误!&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="12-6-5-正则表达式的元字符"><a href="#12-6-5-正则表达式的元字符" class="headerlink" title="12,6,5 正则表达式的元字符"></a>12,6,5 正则表达式的元字符</h3><ul>
<li><p><strong>.</strong> : 查找的单个字符 , 除了换行和结束符</p>
</li>
<li><p><strong>\w</strong> : 查找数字,字母及下划线</p>
</li>
<li><p><strong>\W</strong> : 查找非单词字符</p>
</li>
<li><p>**\d : **查找数字</p>
</li>
<li><p><strong>\D :</strong> 查找非数字</p>
</li>
<li><p>**\s : **查找空白</p>
</li>
<li><p>**\S : **查找非空白</p>
</li>
<li><p>**\b : **匹配单词的边界</p>
</li>
<li><p>**\B : **匹配非单词的边界</p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<ul>
<li>英文句号</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	检查字符串中是否包含 &quot;.&quot;</span></span><br><span class="line"><span class="comment">	. 代表任意字符,所以可以匹配任意字符</span></span><br><span class="line"><span class="comment">	除了 \n \r</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg1 = <span class="regexp">/./</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg1.test(<span class="string">&#x27;$%#^%$^%3908ro7g&#x27;</span>)); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/\./</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="number">132.456</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="number">132456</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="string">&#x27;abcdef&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>\w 和 \W</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	\w 和 \W</span></span><br><span class="line"><span class="comment">	\w: 表示任意字母数字,_ 相当于 [A-z0-9_]</span></span><br><span class="line"><span class="comment">	\W: 除了任意字母数字,_ 相当于 [^A-z0-9_]</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg2 = <span class="regexp">/\w/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="number">123</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="string">&#x27;sdfklj&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg2.test(<span class="string">&#x27;_&#x27;</span>));<span class="comment">//true</span></span><br><span class="line"><span class="keyword">var</span> reg3 = <span class="regexp">/\W/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="number">123</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;sdfklj&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;_&#x27;</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg3.test(<span class="string">&#x27;#%^$#^%$#^%#&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>\d 和 \D</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	\d:任意数字,相当于[0-9]</span></span><br><span class="line"><span class="comment">	\D:除了任意数字,相当于[^0-9]</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg4 = <span class="regexp">/\d/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="number">123</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;123&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg4.test(<span class="string">&#x27;abc123&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="keyword">var</span> reg5 = <span class="regexp">/\D/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="number">123</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="string">&#x27;123&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(reg5.test(<span class="string">&#x27;abc123&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>\s 和 \S</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	\s: 查询空格</span></span><br><span class="line"><span class="comment">	\s: 除了空格</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg6 = <span class="regexp">/\s/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg6.test(<span class="string">&#x27;a bc&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"><span class="keyword">var</span> reg7 = <span class="regexp">/\S/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg7.test(<span class="string">&#x27; &#x27;</span>));<span class="comment">// false</span></span><br></pre></td></tr></table></figure>



<ul>
<li>/b 和 \B</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	\b : 匹配单词的边界</span></span><br><span class="line"><span class="comment">	\B : 匹配非单词的边界</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 创建一个表达式,检查字符串中是否包含world</span></span><br><span class="line"><span class="comment">// 要求包含world而且前面和后面没有其他的单词</span></span><br><span class="line"><span class="keyword">var</span> reg8 = <span class="regexp">/\bworld\b/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;helloworld&#x27;</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;hello world&#x27;</span>));<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> reg8 = <span class="regexp">/\Bworld\B/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;helloworld&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;hello world&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"><span class="built_in">console</span>.log(reg8.test(<span class="string">&#x27;helloworldaaa&#x27;</span>));<span class="comment">// true</span></span><br></pre></td></tr></table></figure>



<ul>
<li>案例 : 取出空格</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">	去除字符串的空格</span></span><br><span class="line"><span class="comment">	1)清除所有空格</span></span><br><span class="line"><span class="comment">	2)清除前面的空格</span></span><br><span class="line"><span class="comment">	3)清除后面的空格</span></span><br><span class="line"><span class="comment">	4)清楚前后空格</span></span><br><span class="line"><span class="comment">	通过 replace()</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">&#x27;     hello     world      &#x27;</span>;</span><br><span class="line"><span class="comment">// 1,清除所有空格</span></span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="regexp">/\s/g</span>,<span class="string">&#x27;&#x27;</span>));</span><br><span class="line"><span class="comment">// 2,清除前面的空格</span></span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="regexp">/^\s*/</span>,<span class="string">&#x27;&#x27;</span>));</span><br><span class="line"><span class="comment">// 3,清除后面的空格</span></span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="regexp">/\s*$/</span>,<span class="string">&#x27;&#x27;</span>));</span><br><span class="line"><span class="comment">// 4,清楚前后空格</span></span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="regexp">/^\s*|\s*$/g</span>,<span class="string">&#x27;&#x27;</span>));</span><br></pre></td></tr></table></figure>



<ul>
<li>案例 : 邮箱</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">	邮箱</span></span><br><span class="line"><span class="comment">	格式:hello.123@abc.com.cn</span></span><br><span class="line"><span class="comment">	1)任意字母数字下划线 3个以上</span></span><br><span class="line"><span class="comment">		\w&#123;3,&#125;</span></span><br><span class="line"><span class="comment">	2). + 任意的字符,量0~?</span></span><br><span class="line"><span class="comment">		(\.\w+)*</span></span><br><span class="line"><span class="comment">	3) @</span></span><br><span class="line"><span class="comment">	4)任意数字或字母</span></span><br><span class="line"><span class="comment">		[A-z0-9]+</span></span><br><span class="line"><span class="comment">	5). + 任意字母2~5 ,会出现一到两次</span></span><br><span class="line"><span class="comment">		(\.[A-z]&#123;2,5&#125;)&#123;1,2&#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> reg = <span class="regexp">/^\w&#123;3,&#125;(\.\w+)*@[A-z0-9]+(\.[A-z]&#123;2,5&#125;)&#123;1,2&#125;$/</span>;</span><br><span class="line"><span class="keyword">var</span> str = prompt(<span class="string">&#x27;请输入邮箱&#x27;</span>);</span><br><span class="line"><span class="keyword">if</span>(reg.test(str)) &#123;</span><br><span class="line">    alert(<span class="string">&#x27;邮箱可用&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    alert(<span class="string">&#x27;非法邮箱,不可用&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h1 id="13-简单数据类型和复杂数据类型"><a href="#13-简单数据类型和复杂数据类型" class="headerlink" title="13,简单数据类型和复杂数据类型"></a>13,简单数据类型和复杂数据类型</h1><p>堆栈空间的分配</p>
<ol>
<li><strong>栈</strong> : 简单数据类型都是将自身的值存放在栈内存中</li>
<li><strong>堆</strong> : 复杂数据类型将值存储在堆内存中</li>
</ol>
<p><strong>注意 : JS 中没有堆栈概念 , 通过堆栈的方式 , 理解代码的求值的操作</strong></p>
<h2 id="13-1-数据类型的分配"><a href="#13-1-数据类型的分配" class="headerlink" title="13,1 数据类型的分配"></a>13,1 数据类型的分配</h2><ul>
<li>值类型 : number , string , boolean , undefined , null</li>
<li>值类型变量的数据直接存放在栈内存中的</li>
<li>复杂数据类型的 , 通过 new 关键字创建的对象 (系统对象 , 自定对象) , Object , Array , Date….</li>
<li>复杂数据类型在变量中存储的是地址, 真实的数据放在对内存中的</li>
</ul>
<blockquote>
<p>简单数据类型的值传递</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a</span>) </span>&#123;</span><br><span class="line">    a++;</span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">fn(num);<span class="comment">// ?</span></span><br><span class="line"><span class="built_in">console</span>.log(num);<span class="comment">// ?</span></span><br></pre></td></tr></table></figure>

<p>结果:</p>
<p>11</p>
<p>10</p>
<blockquote>
<p>复杂数据类型</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(x.name);<span class="comment">//?</span></span><br><span class="line">    x.name = <span class="string">&#x27;张三&#x27;</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(x.name);<span class="comment">//?</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Person(<span class="string">&#x27;李四&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(p.name);<span class="comment">//?</span></span><br><span class="line">fn(p);</span><br><span class="line"><span class="built_in">console</span>.log(p.name);<span class="comment">//?</span></span><br></pre></td></tr></table></figure>

<p>结果 :</p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101165253447.png" alt="image-20211101165253447" style="zoom:50%;" />    





<h1 id="14-DOM"><a href="#14-DOM" class="headerlink" title="14, DOM"></a>14, DOM</h1><h2 id="14-1-DOM-简介"><a href="#14-1-DOM-简介" class="headerlink" title="14,1 DOM 简介"></a>14,1 DOM 简介</h2><p>文档对象模型 ( Document Object Model ) , W3C 在其中规定了一系列用于操作网页文档的借口</p>
<p>开发人员可以通过这些接口修改网页的内容 , 结构 , 样式</p>
<ul>
<li><p><strong>DOM树</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101165907702.png" alt="image-20211101165907702" style="zoom:50%;" />    </li>
<li><p>文档 : 就是网页文档 , html 文档</p>
</li>
<li><p>元素 : 页面中所有的标签 , 在DOM中用元素表示</p>
</li>
<li><p>节点 : 网页中的所有内容都是节点 ( 标签 , 属性 , 文本 , 注释 ) , 用 node 表示</p>
</li>
</ul>
<h1 id="15-获取元素"><a href="#15-获取元素" class="headerlink" title="15, 获取元素"></a>15, 获取元素</h1><ul>
<li>通过 id 获取</li>
<li>通过标签名获取</li>
<li>通过 HTML 5 新增的方式</li>
<li>特殊元素的获取方式</li>
</ul>
<h2 id="15-1-通过-id-获取"><a href="#15-1-通过-id-获取" class="headerlink" title="15,1 通过 id 获取"></a>15,1 通过 id 获取</h2><ul>
<li><p><strong>getElementById(id)</strong></p>
<p>返回一个匹配对应 id 属性值的元素</p>
</li>
</ul>
<p>语法 : </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ele = <span class="built_in">document</span>.getElementById(id)</span><br></pre></td></tr></table></figure>

<p>ele : 对象 , 代表着网页中对应id的元素 , 如果文档中没有匹配到返回空</p>
<p>id : 是一个大小敏感字符</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;time&quot;</span>&gt;</span>2021-11-01<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,因为网页文档是从上向下加载的,所以要先把标签加载完</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> timer = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;time&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(timer);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 验证获取元素的类型</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="keyword">typeof</span> timer);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// dir返回元素对象,并展示所有的属性和方法</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.dir(timer);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101171000497.png" alt="image-20211101171000497" style="zoom:67%;border: solid" />    



<h2 id="15-2-通过标签名称获取"><a href="#15-2-通过标签名称获取" class="headerlink" title="15,2 通过标签名称获取"></a>15,2 通过标签名称获取</h2><ul>
<li><p><strong>getElementsByTagName()</strong></p>
<p>通过标签名获取元素</p>
</li>
<li><p><strong>getElementsByName()</strong></p>
<p>通过标签的 name 属性获取元素</p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<p><strong>getElementsByTagName</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第1li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第2li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第3li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第4li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第5li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 getElementsByTagName() 获取元素对象的集合</span></span><br><span class="line"><span class="keyword">var</span> lis = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(lis);</span><br><span class="line"><span class="built_in">console</span>.log(lis[<span class="number">0</span>]);</span><br><span class="line"><span class="comment">// 遍历</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> lis) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(lis[key]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 注意: 如果页面中只有一个 li ,返回的还是一个为数组</span></span><br><span class="line"><span class="comment">// 注意: 如果页面没有li, 返回一个空的伪数组</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101172426561.png" alt="image-20211101172426561" style="zoom:50%;border: solid" />    



<p><strong>getElementsByName</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">性别: </span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>男</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;gender&quot;</span>&gt;</span>女</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 getElementsByName 获取元素对象集合</span></span><br><span class="line"><span class="keyword">var</span> radios = <span class="built_in">document</span>.getElementsByName(<span class="string">&#x27;gender&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(radios);</span><br><span class="line"><span class="built_in">console</span>.log(radios[<span class="number">1</span>]);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211101172536955.png" alt="image-20211101172536955" style="zoom: 67%;border: solid" />    





<h2 id="15-3-H5新增获取元素的方式"><a href="#15-3-H5新增获取元素的方式" class="headerlink" title="15,3 H5新增获取元素的方式"></a>15,3 H5新增获取元素的方式</h2><ul>
<li>**getElementsByClassName( ‘类名’ ) : **根据元素的 class 属性值匹配元素, 返回元素对象的集合</li>
<li>**querySelector( ‘选择器’ ) : **根据选择器返回第一个元素对象</li>
<li>**querySelectorAll( ‘选择器’ ) : **根据选择器获取元素 , 返回元素对象集合</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span>盒子1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span>盒子2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>产品<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过class属性值获取元素对象集合</span></span><br><span class="line"><span class="keyword">var</span> boxes = <span class="built_in">document</span>.getElementsByClassName(<span class="string">&#x27;box&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(boxes);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过querySelector()获取指定选择器的第一个元素</span></span><br><span class="line"><span class="comment">// 通过选择器获取,注意选择器要有对应的符号,id # class .</span></span><br><span class="line"><span class="comment">// class</span></span><br><span class="line"><span class="keyword">var</span> firstBox = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.box&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(firstBox);</span><br><span class="line"><span class="comment">// id</span></span><br><span class="line"><span class="keyword">var</span> nav = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#nav&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(nav);</span><br><span class="line"><span class="comment">// 标签</span></span><br><span class="line"><span class="keyword">var</span> firstLi = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(firstLi);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过 querySelectorAll 获取指定选择器下的所有元素</span></span><br><span class="line"><span class="comment">// class</span></span><br><span class="line"><span class="keyword">var</span> allBox = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;.box&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(allBox);</span><br><span class="line"><span class="comment">//标签</span></span><br><span class="line"><span class="keyword">var</span> allLi = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(allLi);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102091347635.png" alt="image-20211102091347635" style="zoom:67%;border: solid" />    



<h2 id="15-4-获取特殊元素"><a href="#15-4-获取特殊元素" class="headerlink" title="15,4 获取特殊元素"></a>15,4 获取特殊元素</h2><ul>
<li><strong>获取body</strong></li>
<li><strong>获取html</strong></li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取body元素</span></span><br><span class="line"><span class="keyword">var</span> body = <span class="built_in">document</span>.body;</span><br><span class="line"><span class="built_in">console</span>.log(body);</span><br><span class="line"><span class="comment">// 获取html</span></span><br><span class="line"><span class="keyword">var</span> html = <span class="built_in">document</span>.documentElement;</span><br><span class="line"><span class="built_in">console</span>.log(html);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102092103485.png" alt="image-20211102092103485" style="zoom:67%;border: solid" />    





<h1 id="16-事件"><a href="#16-事件" class="headerlink" title="16, 事件"></a>16, 事件</h1><h2 id="16-1-事件概述"><a href="#16-1-事件概述" class="headerlink" title="16,1 事件概述"></a>16,1 事件概述</h2><p>JS 使我们有能力创建动态页面 , 事件就是 JS 可以检测到的行为</p>
<p>比如 : 用户点击了一个元素 , 导致某些元素的样式发生了变化</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;点我一下,试试吧~~&quot;</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 点按钮的时候网页弹出对话框</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 事件三要素: 事件源 事件类型 事件处理程序</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 事件源: 事件触发的对象 </span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#btn&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 事件类型: 如何触发,鼠标点击 onclick</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 事件处理程序: 当该事件触发是执行的函数</span></span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;按钮点击事件被触发了~~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102094014369.png" alt="image-20211102094014369" style="zoom:67%;border: solid" />    



<ul>
<li><strong>执行事件的三个步骤</strong><ul>
<li>获取事件源</li>
<li>注册事件 ( 绑定事件 )</li>
<li>添加事件处理程序 ( 采用函数赋值的形式 )</li>
</ul>
</li>
</ul>
<h2 id="16-2-常见事件"><a href="#16-2-常见事件" class="headerlink" title="16,2 常见事件"></a>16,2 常见事件</h2><ul>
<li><strong>onclick</strong> : 鼠标左键点击触发</li>
<li>**onmouseover : **鼠标经过的时候触发</li>
<li>**onmouseout : **鼠标离开的时候触发</li>
<li>**onfocus : **鼠标聚焦的时候触发</li>
<li>**onblur : **鼠标焦点离开元素的时候触发</li>
<li>**onmousemove : **鼠标移动的时候触发</li>
<li>**onmouseseup : **鼠标弹起的时候触发</li>
<li>**onmousedown : **鼠标按下的时候触发</li>
</ul>
<h1 id="17-操作元素"><a href="#17-操作元素" class="headerlink" title="17, 操作元素"></a>17, 操作元素</h1><h2 id="17-1-改变元素内容"><a href="#17-1-改变元素内容" class="headerlink" title="17,1 改变元素内容"></a>17,1 改变元素内容</h2><ul>
<li><code>元素对象.innerText</code></li>
</ul>
<p>从元素的起始位置到终点位置的内容 , 会取出 html 标签 , 同时换行和空格会被去掉</p>
<ul>
<li><code>元素对象.innerHTML</code></li>
</ul>
<p>从元素的起始位置到终点位置的内容 , 包括 HTML 标签 , 保留换行和空格</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">	div:内容,在点击按钮的时候显示系统时间</span></span><br><span class="line"><span class="comment">	p:内容,在页面加载时候显示</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>显示当前系统时间<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>某个时间<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>页面加载的时候显示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,获取元素事件源</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>),</span></span><br><span class="line"><span class="javascript">        div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>),</span></span><br><span class="line"><span class="javascript">        p = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;p&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2,注册事件</span></span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        div.innerText = getDate();</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 3,编写一个函数用于获取系统时间 日月年 星期</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">getDate</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(),</span></span><br><span class="line"><span class="javascript">            year = date.getFullYear(),</span></span><br><span class="line"><span class="javascript">            month = date.getMonth() + <span class="number">1</span>,</span></span><br><span class="line"><span class="javascript">            dates = date.getDate(),</span></span><br><span class="line"><span class="javascript">            day = date.getDay()</span></span><br><span class="line"><span class="javascript">        arr = [<span class="string">&#x27;日&#x27;</span>,<span class="string">&#x27;一&#x27;</span>,<span class="string">&#x27;二&#x27;</span>,<span class="string">&#x27;三&#x27;</span>,<span class="string">&#x27;四&#x27;</span>,<span class="string">&#x27;五&#x27;</span>,<span class="string">&#x27;六&#x27;</span>];</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="string">&#x27;今天是:&#x27;</span> + year + <span class="string">&#x27;年&#x27;</span> + month + <span class="string">&#x27;月&#x27;</span> + dates + <span class="string">&#x27;日 &#x27;</span> + <span class="string">&#x27;星期&#x27;</span> +</span></span><br><span class="line"><span class="javascript">            arr[day];</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 页面加载的时候就执行</span></span></span><br><span class="line"><span class="javascript">    p.innerText = getDate();</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102101238897.png" alt="image-20211102101238897" style="zoom:50%;border:solid" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102101253263.png" alt="image-20211102101253263" style="zoom:50%;border: solid" /></p>
<ul>
<li>innerText 和 innerHTML 的区别</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    我是一个p标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是p中的span<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// innerHTML 和 innerText 的区别</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,innerText不会识别html标签,非标准,去除空格和换行</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// div.innerText = &#x27;&lt;strong&gt;今天是:&lt;/strong&gt;2021年&#x27;;</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2,innerHTML可以识别HTML标签,保留原有代码格式</span></span></span><br><span class="line"><span class="javascript">    div.innerHTML = <span class="string">&#x27;&lt;strong&gt;今天是:&lt;/strong&gt;2021年&#x27;</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 这两个属性够可以对元素进行读写操作</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> p = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;p&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(p.innerText);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(p.innerHTML);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h2 id="17-2-常见的元素属性"><a href="#17-2-常见的元素属性" class="headerlink" title="17,2 常见的元素属性"></a>17,2 常见的元素属性</h2><ul>
<li>innerText , innerHTML 改变元素内容</li>
<li>src , href</li>
<li>id , alt , title</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<ul>
<li>通过点击按钮改变图片的内容</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取事件源</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> prev = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#prev&#x27;</span>),</span></span><br><span class="line"><span class="javascript">        next = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#next&#x27;</span>),</span></span><br><span class="line"><span class="javascript">        img = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;img&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 声明一个数组保存地址</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 对象写法: &#123;src:&#x27;../img/img01.jpg&#x27;,title:&#x27;一级指控&#x27;&#125;</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> imgSrcArr = [</span></span><br><span class="line"><span class="javascript">        [<span class="string">&#x27;../img/img01.jpg&#x27;</span>,<span class="string">&#x27;一级指控&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        [<span class="string">&#x27;../img/img02.jpg&#x27;</span>,<span class="string">&#x27;亚洲舞王&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        [<span class="string">&#x27;../img/img03.jpg&#x27;</span>,<span class="string">&#x27;风暴&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        [<span class="string">&#x27;../img/img04.jpg&#x27;</span>,<span class="string">&#x27;一九二一&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        [<span class="string">&#x27;../img/img05.jpg&#x27;</span>,<span class="string">&#x27;妇联4&#x27;</span>]</span></span><br><span class="line"><span class="javascript">    ];</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(imgSrcArr[<span class="number">0</span>].src);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 声明变量为数组下标,函数通过增加这个值,改变图片的src</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> index = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 绑定事件</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 上一页</span></span></span><br><span class="line"><span class="javascript">    prev.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 判断条件限制</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span>(index == <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="javascript">            index = imgSrcArr.length - <span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> i = --index;</span></span><br><span class="line"><span class="javascript">        img.src = imgSrcArr[i][<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">        img.title = imgSrcArr[i][<span class="number">1</span>];</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    next.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 判断条件限制</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span>(index == imgSrcArr.length - <span class="number">1</span>) &#123;</span></span><br><span class="line"><span class="javascript">            index = -<span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> i = ++index;</span></span><br><span class="line"><span class="javascript">        img.src = imgSrcArr[i][<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">        img.title = imgSrcArr[i][<span class="number">1</span>];</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102141239754.png" alt="image-20211102141239754" style="zoom:50%;border: solid" />    点击下一页后    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102141258590.png" alt="image-20211102141258590" style="zoom:50%;border: solid" /></p>
<h2 id="17-3-表单元素的属性"><a href="#17-3-表单元素的属性" class="headerlink" title="17,3 表单元素的属性"></a>17,3 表单元素的属性</h2><p><strong>type , value , checked , selected , disable</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    通过点击按钮改变文本框中的文字</span></span><br><span class="line"><span class="comment">    并且是按钮处于禁用状态</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">value</span>=<span class="string">&quot;输入内容&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> input = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;input&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2,注册事件,绑定事件处理程序</span></span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// input.innerHTML = &#x27;点击了&#x27;;改变的是普通盒子标签中的内容</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 文本框中的值, 文字内容通过 value属性调整</span></span></span><br><span class="line"><span class="javascript">        input.value = <span class="string">&#x27;点击了&#x27;</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 操作disabled属性, 属性值为true禁用,反之为启用</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// btn.disabled = true;</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">// this 在这里代表调用函数的对象,事件函数的调用者</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.disabled = <span class="literal">true</span>;</span></span><br><span class="line"><span class="javascript">        input.disabled = <span class="literal">true</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="17-4-修改样式属性"><a href="#17-4-修改样式属性" class="headerlink" title="17,4 修改样式属性"></a>17,4 修改样式属性</h2><ul>
<li><p><strong>element . style</strong></p>
<p>改变行内样式</p>
</li>
<li><p><strong>element . className</strong></p>
<p>改变类名样式</p>
</li>
</ul>
<blockquote>
<p>代码实例 : 通过 style 属性改变元素样式</p>
</blockquote>
<p>样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="css">        <span class="attribute">transition</span>: all <span class="number">1s</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结构 + 脚本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 鼠标点击时改变元素宽高和颜色 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2,绑定事件以及处理函数</span></span></span><br><span class="line"><span class="javascript">    div.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// this代表调用这个事件函数的div</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.height = <span class="string">&#x27;300px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// style属性中所有名称全部都是驼峰命名</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.backgroundColor = <span class="string">&#x27;blue&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 3,鼠标经过时改变宽度和背景</span></span></span><br><span class="line"><span class="javascript">    div.onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// this代表调用这个事件函数的div</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.width = <span class="string">&#x27;300px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// style属性中所有名称全部都是驼峰命名</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.backgroundColor = <span class="string">&#x27;green&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125; </span></span><br><span class="line"><span class="javascript">    <span class="comment">// 3,鼠标经过时改变宽度和背景</span></span></span><br><span class="line"><span class="javascript">    div.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// this代表调用这个事件函数的div</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.width = <span class="string">&#x27;200px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// style属性中所有名称全部都是驼峰命名</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.backgroundColor = <span class="string">&#x27;pink&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102145502946.png" alt="image-20211102145502946" style="zoom:50%;" />    点击时 <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102145523308.png" alt="image-20211102145523308" style="zoom:50%;" />    经过时    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102145542928.png" alt="image-20211102145542928" style="zoom:50%;" />    </p>
<p>**注意 : **</p>
<p><strong>1, JS里面通过 style 修改的属性的名字全部都是小驼峰形式的 , 比如 : fontStyle , lineHeight , backgroundColor</strong></p>
<p><strong>2, 修改的 style 样式操作 , 产生的事行内样式 , CSS 权重很高</strong></p>
<blockquote>
<p>代码实例 : 通过 className 改变元素属性</p>
</blockquote>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.change</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">45px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    我是一个div</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>JS </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.box&#x27;</span>);</span><br><span class="line">box.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 直接讲当前元素的class 属性值变为我们需要更改的类选择器名称</span></span><br><span class="line">    <span class="comment">// 适合用于较多的样式调整</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">this</span>.className == <span class="string">&#x27;change box&#x27;</span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>.className = <span class="string">&#x27;box&#x27;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.className = <span class="string">&#x27;change box&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>注意 :</strong></p>
<ol>
<li><p>如果样式过多的情况 , 可以采用类名的方式进行调整</p>
</li>
<li><p>class 是一个保留字 , 因此使用 className 来操作元素的类名</p>
</li>
<li><p>className 会直接更改元素的类名 , 会覆盖原有的类名</p>
<p>如果我们想要保留原有的类名 , 可以使用以下下发</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">元素.className = <span class="string">&#x27;源类名 新类名&#x27;</span>;</span><br></pre></td></tr></table></figure></li>
</ol>
<ul>
<li><strong>案例 : 表单的非空判断, 及正则验证</strong></li>
</ul>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    用户名:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;un&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;un-msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,获取用户名input元素</span></span><br><span class="line"><span class="keyword">var</span> un = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#un&#x27;</span>);</span><br><span class="line">un.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="comment">// 非空判断</span></span><br><span class="line">	<span class="comment">// 获取表单元素中的值</span></span><br><span class="line">	<span class="keyword">var</span> unVel = <span class="built_in">this</span>.value;</span><br><span class="line">	<span class="comment">// 获取提示信息元素对象</span></span><br><span class="line">	<span class="keyword">var</span> unMsg = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#un-msg&#x27;</span>);</span><br><span class="line">	<span class="keyword">if</span>(unVel == <span class="string">&#x27;&#x27;</span> || unVel == <span class="literal">null</span>) &#123;</span><br><span class="line">		unMsg.innerHTML = <span class="string">&#x27;用户名不可为空&#x27;</span>;</span><br><span class="line">		unMsg.style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">		<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">	&#125;<span class="keyword">else</span> &#123;<span class="comment">// 用户名不为空</span></span><br><span class="line">		<span class="comment">//规则字母开头有任意数字字母下划线组成,长度为8的</span></span><br><span class="line">		<span class="keyword">var</span> reg = <span class="regexp">/^[A-z]\w&#123;7&#125;$/</span>;</span><br><span class="line">		<span class="keyword">if</span>(reg.test(unVel)) &#123;</span><br><span class="line">			unMsg.innerHTML = <span class="string">&#x27;用户名可用&#x27;</span>;</span><br><span class="line">			unMsg.style.color = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">			<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			unMsg.innerHTML = <span class="string">&#x27;用户名仅支持英文字母开头,任意数字字母下划线组成,长度为8的格式&#x27;</span>;</span><br><span class="line">			unMsg.style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">			<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li><strong>案例 : 表单密码非空判断 , 及正则验证 + 确认密码</strong></li>
</ul>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    密<span class="symbol">&amp;emsp;</span>码:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;password&quot;</span> <span class="attr">id</span>=<span class="string">&quot;pwd&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;pwd-msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    确认密码:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">name</span>=<span class="string">&quot;pwd-chk&quot;</span> <span class="attr">id</span>=<span class="string">&quot;chk&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;chk-msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 密码验证</span></span><br><span class="line"><span class="comment">// 不可为空,</span></span><br><span class="line"><span class="comment">// 如果为空提示,信息颜色为红色</span></span><br><span class="line"><span class="comment">// 如果密码不可用,提示密码中存在非法字符,信息颜色为红色</span></span><br><span class="line"><span class="keyword">var</span> pwd = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#pwd&#x27;</span>);</span><br><span class="line">pwd.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="comment">// 非空判断</span></span><br><span class="line">	<span class="comment">// 获取表单元素中的值</span></span><br><span class="line">	<span class="keyword">var</span> pwdVel = <span class="built_in">this</span>.value;</span><br><span class="line">	<span class="comment">// 获取提示信息元素对象</span></span><br><span class="line">	<span class="keyword">var</span> pwdMsg = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#pwd-msg&#x27;</span>);</span><br><span class="line">	<span class="keyword">if</span>(pwdVel == <span class="string">&#x27;&#x27;</span> || pwdVel == <span class="literal">null</span>) &#123;</span><br><span class="line">		pwdMsg.innerHTML = <span class="string">&#x27;密码不可为空&#x27;</span>;</span><br><span class="line">		pwdMsg.style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">		<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">	&#125;<span class="keyword">else</span> &#123;<span class="comment">// 密码不为空</span></span><br><span class="line">		<span class="comment">//规则密码长度在5~10之间,有任意数字字母下划线组成的字符</span></span><br><span class="line">		<span class="keyword">var</span> reg = <span class="regexp">/^\w&#123;5,10&#125;$/</span>;</span><br><span class="line">		<span class="keyword">if</span>(reg.test(pwdVel)) &#123;</span><br><span class="line">			pwdMsg.innerHTML = <span class="string">&#x27;密码可用&#x27;</span>;</span><br><span class="line">			pwdMsg.style.color = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">			<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">		&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">			pwdMsg.innerHTML = <span class="string">&#x27;密码中存在非法字符,且长度应为5~10为字符&#x27;</span>;</span><br><span class="line">			pwdMsg.style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">			<span class="built_in">this</span>.style.borderColor = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 验证两次密码输入是否相同,不同给出提示信息</span></span><br><span class="line"><span class="comment">// 相同也给出提示信息,对应信息对应颜色</span></span><br><span class="line"><span class="keyword">var</span> chk = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#chk&#x27;</span>);</span><br><span class="line">chk.onblur = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">var</span> chkVal = chk.value;</span><br><span class="line">	<span class="keyword">var</span> chkMsg =  <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#chk-msg&#x27;</span>);</span><br><span class="line">	<span class="keyword">if</span>(chkVal == pwd.value) &#123;</span><br><span class="line">		chkMsg.innerHTML = <span class="string">&#x27;两次密码输入一至&#x27;</span>;</span><br><span class="line">		chkMsg.style.color = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">		chkMsg.style.borderColor = <span class="string">&#x27;green&#x27;</span>;</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		chkMsg.innerHTML = <span class="string">&#x27;两次密码输入不一至&#x27;</span>;</span><br><span class="line">		chkMsg.style.color = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">		chkMsg.style.borderColor = <span class="string">&#x27;red&#x27;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li><strong>案例 : 全选按钮</strong></li>
</ul>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    爱好:</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">id</span>=<span class="string">&quot;allCheck&quot;</span> /&gt;</span>全选</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;lol&quot;</span> /&gt;</span>英雄联盟</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;cod&quot;</span> /&gt;</span>使命召唤</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;wow&quot;</span> /&gt;</span>魔兽世界</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">name</span>=<span class="string">&quot;hobbies&quot;</span> <span class="attr">value</span>=<span class="string">&quot;java&quot;</span> /&gt;</span>Java编程</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,获取全选按钮元素对象</span></span><br><span class="line"><span class="keyword">var</span> allCheck = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#allCheck&#x27;</span>);</span><br><span class="line">allCheck.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="keyword">var</span> arr = <span class="built_in">document</span>.getElementsByName(<span class="string">&#x27;hobbies&#x27;</span>);</span><br><span class="line">	<span class="comment">// 2,将这个对象的checked属性值赋值个所有的复选按钮</span></span><br><span class="line">	<span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">		arr[i].checked = <span class="built_in">this</span>.checked;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li><strong>案例 : 树形菜单 , 移除隐藏</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">    树形菜单</span></span><br><span class="line"><span class="comment">    鼠标经过游戏资料的时候列表显示出来</span></span><br><span class="line"><span class="comment">    通过控制title的高度显示下面列表中的内容</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;title&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>游戏资料<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>游戏下载<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>新手指引<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>攻略中心<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> title = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#title&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    title.onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.height = <span class="string">&#x27;150px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    title.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.style.height = <span class="string">&#x27;60px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102171849509.png" alt="image-20211102171849509" style="zoom:50%;" />    鼠标经过    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102171904051.png" alt="image-20211102171904051" style="zoom:50%;" /></p>
<ul>
<li><strong>案例 : display 显示 隐藏</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">	鼠标经过 box1 的时候 box2 显示出来</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取事件源box1</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> box1 = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.box1&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> box2 = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.box2&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    box1.onmouseover = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        box2.style.display = <span class="string">&#x27;block&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    box1.onmouseout = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        box2.style.display = <span class="string">&#x27;none&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102172000124.png" alt="image-20211102172000124" style="zoom:50%;" />    鼠标经过    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211102172013011.png" alt="image-20211102172013011" style="zoom:50%;" /></p>
<h1 id="18-排他思想"><a href="#18-排他思想" class="headerlink" title="18, 排他思想"></a>18, 排他思想</h1><p>首先将其他人样式全部排除掉 , 然后设置自己的样式 , 这种操作就被称为排他思想</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment">	点击一个按钮的时候,变色变为蓝色,其他按钮颜色不变</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮2<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮3<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮4<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮5<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,获取了所有的按钮元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> arr = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 2,为每个按钮元素绑定点击事件</span></span></span><br><span class="line"><span class="javascript">        arr.item(i).onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">// 3,首先将所有元素样式全部排除掉</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; arr.length; j++) &#123;</span></span><br><span class="line"><span class="javascript">                <span class="comment">// 将所有按钮的背景颜色复原</span></span></span><br><span class="line"><span class="javascript">                arr[j].style.backgroundColor = <span class="string">&#x27;&#x27;</span>;</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.style.backgroundColor = <span class="string">&#x27;blue&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>如果有同一组元素 , 我们想要某一个元素实现某一种样式的时候 , 需要用到循环的排他思想</strong></p>
<ol>
<li>将所有元素的样式全部恢复 ( 干掉所有人 )</li>
<li>给当前的元素再次设置对应的样式 ( 复活自己 )</li>
</ol>
<h1 id="19-元素属性的操作"><a href="#19-元素属性的操作" class="headerlink" title="19, 元素属性的操作"></a>19, 元素属性的操作</h1><h2 id="19-1-获取元素属性"><a href="#19-1-获取元素属性" class="headerlink" title="19,1 获取元素属性"></a>19,1 获取元素属性</h2><ul>
<li><strong>element.属性</strong> 获取元素属性</li>
<li><strong>element.getAttribute(‘属性’)</strong> 获取元素的属性</li>
</ul>
<p><strong>区别 :</strong></p>
<ul>
<li><strong>element.属性</strong>    获取内置元素属性( 元素自带的属性 )</li>
<li><strong>element.getAttribute(‘属性’)</strong>  主要用于获取元素的自定义属性 , 开发人员自己定义的属性</li>
</ul>
<h2 id="19-2-设置元素属性"><a href="#19-2-设置元素属性" class="headerlink" title="19,2 设置元素属性"></a>19,2 设置元素属性</h2><ul>
<li><strong>element.属性 = ‘值’</strong> 获取元素属性</li>
<li><strong>element.getAttribute(‘属性’)</strong> 获取元素的属性</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取元素</span></span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">// 通过 元素对象.属性 的方式</span></span><br><span class="line"><span class="built_in">console</span>.log(div.id);</span><br><span class="line"><span class="built_in">console</span>.log(div.index);</span><br><span class="line"><span class="comment">// 通过 getAttribute() 获取自定义的属性</span></span><br><span class="line"><span class="built_in">console</span>.log(div.getAttribute(<span class="string">&#x27;haha&#x27;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(div.getAttribute(<span class="string">&#x27;index&#x27;</span>));</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103175154015.png" alt="image-20211103175154015">    </p>
<h2 id="19-3-设置属性值"><a href="#19-3-设置属性值" class="headerlink" title="19,3 设置属性值"></a>19,3 设置属性值</h2><ul>
<li><strong>element.属性 = ‘值’</strong>    设置内置属性</li>
<li><strong>element.serAttribute(‘属性’ , ‘值’)</strong>    设置自定义属性</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过 .属性的方式,设置内置属性</span></span><br><span class="line">div.id = <span class="string">&#x27;test&#x27;</span>;</span><br><span class="line"><span class="comment">// 通过 setAttribute(&#x27;属性&#x27;,值) 设置自定义的属性</span></span><br><span class="line">div.setAttribute(<span class="string">&#x27;haha&#x27;</span>,<span class="string">&#x27;嘿嘿&#x27;</span>);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103175218076.png" alt="image-20211103175218076">    </p>
<h2 id="19-4-移除属性"><a href="#19-4-移除属性" class="headerlink" title="19,4 移除属性"></a>19,4 移除属性</h2><ul>
<li><strong>element.removeAttribute(‘属性’)</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 为元素添加一个自定义的属性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;demo&quot;</span> <span class="attr">haha</span>=<span class="string">&quot;哈哈&quot;</span> <span class="attr">index</span>=<span class="string">&quot;1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过 removeAttribute(&#x27;属性&#x27;) 移除属性</span></span></span><br><span class="line"><span class="javascript">    div.removeAttribute(<span class="string">&#x27;haha&#x27;</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103175549137.png" alt="image-20211103175549137">    </p>
<ul>
<li><strong>案例 : tab 切换</strong></li>
</ul>
<p>思路 : </p>
<p>1, 选项卡点击一个其余不变 ( 排他思想 ) , 通过修改类名的方式</p>
<p>2, 下面对应的内容变化也要写在事件中</p>
<p>3, 上下内容要相互对应</p>
<p>4, 给每个 li 加上一个自定义属性 , 属性值从0开始</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 整体的内容 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tab&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 标题栏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tab-list&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">&quot;current&quot;</span>&gt;</span>商品介绍<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>规格与包装<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>售后保障<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>商品评价(20万+)<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>商品问答<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 内容 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tab-con&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span> <span class="attr">style</span>=<span class="string">&quot;display: block;&quot;</span>&gt;</span>商品介绍内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>规格与包装内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>售后保障内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>商品评价内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>商品问答内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 清楚默认样式 */</span></span><br><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 设置标题栏的属性 */</span></span><br><span class="line"><span class="selector-class">.tab</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">800px</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 设置标题列表的属性 */</span></span><br><span class="line"><span class="selector-class">.tab-list</span> &#123;</span><br><span class="line">	<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">38px</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#f7f7f7</span>;</span><br><span class="line">	<span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line">	<span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#e4393c</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tab-list</span> <span class="selector-tag">ul</span> &#123;</span><br><span class="line">	<span class="attribute">list-style</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tab-list</span> <span class="selector-tag">li</span> &#123;</span><br><span class="line">	<span class="attribute">float</span>: left;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">38px</span>;</span><br><span class="line">	<span class="attribute">line-height</span>: <span class="number">38px</span>;</span><br><span class="line">	<span class="attribute">text-align</span>: center;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">25px</span>;</span><br><span class="line">	<span class="attribute">cursor</span>: pointer;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">12px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tab-list</span> <span class="selector-tag">ul</span>:after &#123;</span><br><span class="line">	content: <span class="string">&quot;&quot;</span>;</span><br><span class="line">	<span class="attribute">display</span>: block;</span><br><span class="line">	<span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">	<span class="attribute">visibility</span>: hidden;</span><br><span class="line">	<span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 选中后的效果 */</span></span><br><span class="line"><span class="selector-class">.tab-list</span> <span class="selector-class">.current</span> &#123;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#e4393c</span>;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 内容信息隐藏 */</span></span><br><span class="line"><span class="selector-class">.item</span> &#123;</span><br><span class="line">	<span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1,获取所有li, .item 元素</span></span><br><span class="line"><span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> items = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;.item&#x27;</span>);</span><br><span class="line"><span class="comment">// 2,为每个li绑定点击事件</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; lis.length; i++) &#123;</span><br><span class="line">	<span class="comment">// 3,给每个li设置自定义的 index 属性</span></span><br><span class="line">	lis[i].setAttribute(<span class="string">&#x27;data-index&#x27;</span>,i);</span><br><span class="line">	lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="comment">// 4,干掉其他人</span></span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; lis.length; j++) &#123;</span><br><span class="line">			lis[j].className = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">		&#125; </span><br><span class="line">		<span class="comment">// 5,改变当前点击的元素class样式</span></span><br><span class="line">		<span class="built_in">this</span>.className = <span class="string">&#x27;current&#x27;</span>;</span><br><span class="line">	</span><br><span class="line">		<span class="comment">// 显示对应的内容,获取对应index属性</span></span><br><span class="line">		<span class="keyword">var</span> index = <span class="built_in">this</span>.getAttribute(<span class="string">&#x27;data-index&#x27;</span>);</span><br><span class="line">		<span class="comment">// 将所有的item隐藏</span></span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">var</span> l = <span class="number">0</span>; l&lt; items.length; l++) &#123;</span><br><span class="line">			items[l].style.display = <span class="string">&#x27;none&#x27;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		items[index].style.display = <span class="string">&#x27;block&#x27;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>





<h1 id="20-H5自定义属性"><a href="#20-H5自定义属性" class="headerlink" title="20, H5自定义属性"></a>20, H5自定义属性</h1><p><strong>自定义属性的目的 : 是为了更好的保存数据 , 有些数据可以保存在页面中不用保存到数据库中</strong></p>
<p>获取自定义属性的方式 : <strong>getAttribute()</strong></p>
<p>有些属性的定义容易产生歧义 , 不容易判断定义的属性是否是内置属性还是自定义的</p>
<h2 id="20-1-设置H5自定义属性"><a href="#20-1-设置H5自定义属性" class="headerlink" title="20,1 设置H5自定义属性"></a>20,1 设置H5自定义属性</h2><p><strong>==H5规定自定义属性 data- 开头作为属性名并赋值==</strong></p>
<p>比如 : ele . setAttribute(‘data-val’ , ….. )</p>
<p>&lt; div data-msg=’…….’&gt;&lt;/div&gt;</p>
<h2 id="20-2-获取H5自定义属性"><a href="#20-2-获取H5自定义属性" class="headerlink" title="20,2 获取H5自定义属性"></a>20,2 获取H5自定义属性</h2><ol>
<li>兼容性较好  ele . getAttribute( ‘ data-XXXX ‘ )</li>
<li>H5 新增 dataset 集合 , 获取方式 <strong>ele.dataset.index</strong> 或者 <strong>ele.dataset[ ‘ index ‘ ]</strong> ie浏览器1版本以上</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-time</span>=<span class="string">&quot;20&quot;</span> <span class="attr">data-user-name</span>=<span class="string">&quot;Tom&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    div.setAttribute(<span class="string">&#x27;data-index&#x27;</span>,<span class="number">1</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.getAttribute(<span class="string">&#x27;data-index&#x27;</span>));</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过 dataset 集合获取自定义属性</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// dataset 是一个对象,里面存放着所有data开头的自定义属性</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset.time);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset.index);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset[<span class="string">&#x27;time&#x27;</span>]);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 如果自定义属性中有多个 - 链接属性名称,我们通过驼峰命名的方式来取值</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset.userName);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(div.dataset[<span class="string">&#x27;userName&#x27;</span>]);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103140042320.png" alt="image-20211103140042320" style="zoom:50%;border: solid" />    





<h1 id="21-节点操作"><a href="#21-节点操作" class="headerlink" title="21, 节点操作"></a>21, 节点操作</h1><h2 id="21-1-为何使用节点操作"><a href="#21-1-为何使用节点操作" class="headerlink" title="21,1 为何使用节点操作"></a>21,1 为何使用节点操作</h2><p><strong>==获取元素对象的两种形式==</strong></p>
<ol>
<li><p>利用 DOM 提供方法获取元素</p>
<p>逻辑性不强 , 繁琐</p>
</li>
<li><p>利用节点的层级关系</p>
<p>逻辑性强 , 兼容性差</p>
</li>
</ol>
<h2 id="21-2-节点概述"><a href="#21-2-节点概述" class="headerlink" title="21,2 节点概述"></a>21,2 节点概述</h2><p>网页中的所有内容都是节点 ( 标题 , 注释 , 属性 , 文本 ) , 在 DOM 中用 node 表示</p>
<p>一般来说一个借点至少 nodeType(节点类型) , nodeName(节点名称) , nodeValue(节点值)</p>
<ul>
<li>元素节点 nodeType = 1</li>
<li>属性节点 nodeType = 2</li>
<li>文本节点 nodeType = 3 ( 文字 , 空格 , 换行 )</li>
</ul>
<p>==在实际开发中 , 节点操作主要操作的是元素节点==</p>
<h2 id="21-3-父级节点"><a href="#21-3-父级节点" class="headerlink" title="21,3 父级节点"></a>21,3 父级节点</h2><p>语法 : </p>
<p><code>node.parentNode</code></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 获取父节点 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;dome&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取元素 son</span></span><br><span class="line"><span class="keyword">var</span> son = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.son&#x27;</span>);</span><br><span class="line"><span class="comment">// 原有方式: document.querySelector(&#x27;.father&#x27;)</span></span><br><span class="line"><span class="comment">// 获得是距离节点嵌套关系的最近父元素/节点</span></span><br><span class="line"><span class="built_in">console</span>.log(son.parentNode);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103142618538.png" alt="image-20211103142618538">    </p>
<h2 id="21-4-子节点"><a href="#21-4-子节点" class="headerlink" title="21,4 子节点"></a>21,4 子节点</h2><p><strong>语法 :</strong></p>
<p><code>node.childNodes</code></p>
<p><strong>childNodes</strong> 返回包含指定子节点 ( 所有节点 ) 的集合 , 该集合为<strong>实时更新</strong>的集合</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 获取子节点 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取ul元素</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line"><span class="comment">// 原有获取子节点的方式</span></span><br><span class="line"><span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line"><span class="comment">// 获取子节点</span></span><br><span class="line"><span class="comment">// 注意:childNodes获取的是所有的子节点,包含了文档节点,以及元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.childNodes);</span><br><span class="line"><span class="comment">// 遍历子节点中所有的 li 标签</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i &lt; ul.childNodes.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span>(ul.childNodes[i].nodeType == <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(ul.childNodes[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103142820508.png" alt="image-20211103142820508" style="zoom:50%;border: solid" />



<ul>
<li><strong>第二种方式</strong></li>
</ul>
<p><code>parentNode.children</code></p>
<p><strong>children</strong> 是一个只读属性 , 返回所有子元素节点 , 但是只返回元素节点 , 其余节点不会返回</p>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取ul元素</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line"><span class="comment">// 获取所有的子元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.children);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103144658774.png" alt="image-20211103144658774" style="zoom:50%;" />    



<ul>
<li><p><strong>获取一个和最后一个</strong></p>
<ul>
<li><strong>firstChild : 返回第一个子节点 , 找不到返回 null , 会返回所有类型的节点</strong></li>
<li><strong>lastChild : 返回最后一个子节点 , 找不到返回 null , 会返回所有类型的节点</strong></li>
</ul>
<p>获取元素节点 ( ==存在一定的兼容性问题== )</p>
<ul>
<li>**firstElementChild : 返回第一个子元素节点 , 找不到返回 null **</li>
<li>**lastElementChild : 返回最后一个子元素节点 , 找不到返回 null **</li>
</ul>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 获取子节点 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取ul元素</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line"><span class="comment">// 获取第一个和最后一个节点(不关注类型)</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.firstChild);</span><br><span class="line"><span class="built_in">console</span>.log(ul.lastChild);</span><br><span class="line"><span class="comment">// 获取第一个和最后一个子元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.firstElementChild);</span><br><span class="line"><span class="built_in">console</span>.log(ul.lastElementChild);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103145307452.png" alt="image-20211103145307452" style="zoom:60%;border: solid" />    



<h2 id="21-5-兄弟节点"><a href="#21-5-兄弟节点" class="headerlink" title="21,5 兄弟节点"></a>21,5 兄弟节点</h2><ul>
<li><strong>nextSibling : 获取当前节点下一个节点 , 找不到返回null , 返回所有类型的节点</strong></li>
<li><strong>previousSibling : 获取当前节点上一个节点 , 找不到返回null , 返回所有类型的节点</strong></li>
</ul>
<p>==返回上下元素节点(存在兼容性问题)==</p>
<ul>
<li><strong>nextElementSibiling : 获取当前节点下一个元素 , 找不到返回null</strong></li>
<li><strong>previousElementSibiling : 获取当前节点上一个元素 , 找不到返回null</strong></li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是一个div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>我是一个span<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我是一个p<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取span标签的元素对象</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> span = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;span&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取上写兄弟节点不考虑类型</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(span.previousSibling);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(span.nextSibling);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取上写兄弟元素节点</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(span.previousElementSibling);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(span.nextElementSibling);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103150405013.png" alt="image-20211103150405013" style="zoom:67%;border: solid" />    



<h2 id="21-6-创建和添加"><a href="#21-6-创建和添加" class="headerlink" title="21,6 创建和添加"></a>21,6 创建和添加</h2><ul>
<li><p><strong>document.createElement( ‘ 标签名 ‘ )</strong></p>
<p>创建指定标签的 HTML 元素 , 因为写的元素不存在 , 是根据我们的需求编写 , 称之为 <strong>动态生成元素节点</strong></p>
</li>
<li><p><strong>document.appendChild(child)</strong></p>
<p>将一个节点添加到指定的父节点<strong>末尾</strong> , 类似于 css 的 after 伪元素</p>
</li>
<li><p><strong>document.insertBefore(child , 指定元素)</strong></p>
<p>将一个节点添加到指定节点的前面 , 将 child 添加到指定元素的前方</p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个li元素节点</span></span><br><span class="line"><span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">li.innerHTML = <span class="string">&#x27;我是新增的li&#x27;</span>;</span><br><span class="line"><span class="comment">// 获取ul父元素节点</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line">ul.appendChild(li);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在ul的第一个子元素前面加新建的li元素</span></span><br><span class="line"><span class="keyword">var</span> lili = <span class="built_in">document</span>.createElement(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">lili.innerHTML = <span class="string">&#x27;我是第一个li&#x27;</span>;</span><br><span class="line">ul.insertBefore(lili,ul.children[<span class="number">0</span>]);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103151753096.png" alt="image-20211103151753096" style="zoom:80%;border: solid" />    



<h2 id="21-7-删除节点"><a href="#21-7-删除节点" class="headerlink" title="21,7 删除节点"></a>21,7 删除节点</h2><p><strong>语法 :</strong> </p>
<p><code>removeChild(child)</code></p>
<p>从 DOM 中删除子节点 , 返回删除的节点</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第4个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第5个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取元素</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> list = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.list&#x27;</span>);</span><br><span class="line"><span class="comment">// 注册事件</span></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 通过 removeChild(ele)</span></span><br><span class="line">    <span class="keyword">if</span>(list.children.length == <span class="number">0</span>) &#123;</span><br><span class="line">        <span class="built_in">this</span>.disabled = <span class="literal">true</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> del = list.removeChild(list.children[list.children.length - <span class="number">1</span>]);</span><br><span class="line">        <span class="built_in">console</span>.log(del);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103153222189.png" alt="image-20211103153222189" style="zoom:67%;border: solid" />    





<ul>
<li><p><strong>案例 : 记事本</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103154424689.png" alt="image-20211103154424689" style="zoom:80%;border: solid" />    </li>
</ul>
<p>点击添加时列表底部新增内容</p>
<p>输入序号点击删除时 , 删除列表中对应的序号内容 , 弹出警告框提示 “……..” 已被移出记事本</p>
<p>添加 : 创建元素节点, 加入列表的末尾</p>
<p>删除 : 通过子元素的下标删除对应的元素借点 , 并将返回值获取 , 通过 alert 打印出来</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取元素</span></span><br><span class="line"><span class="keyword">var</span> msg = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#msg&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> add = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#add&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> num = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#num&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> del = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#del&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> ol = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ol&#x27;</span>);</span><br><span class="line">add.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">&#x27;li&#x27;</span>);</span><br><span class="line">    li.innerHTML = msg.value;</span><br><span class="line">    <span class="keyword">if</span>(li.innerHTML == <span class="string">&#x27;&#x27;</span> || li.innerHTML == <span class="literal">null</span>) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;请写点东西吧~~~&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        ol.appendChild(li);</span><br><span class="line">    &#125;</span><br><span class="line">    msg.value = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line">del.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> index = num.value;</span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">isNaN</span>(index) || index == <span class="string">&#x27;&#x27;</span> || index == <span class="literal">null</span>) &#123;</span><br><span class="line">        alert(<span class="string">&#x27;请输入您要删除的序号&#x27;</span>);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(index &gt; ol.children.length || index &lt; <span class="number">0</span>) &#123;</span><br><span class="line">            alert(<span class="string">&#x27;您输入的序号不存在&#x27;</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            ol.removeChild(ol.children[--index]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    num.value = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103162515504.png" alt="image-20211103162515504" style="zoom:67%;" />    



<h2 id="21-8-复制节点"><a href="#21-8-复制节点" class="headerlink" title="21,8 复制节点"></a>21,8 复制节点</h2><p><strong>语法 :</strong></p>
<p><code>node.cloneNode(true / false) </code></p>
<p>() 中的内容为空或者 false 浅拷贝 , 只复制标签不带内容 ( 子节点 )</p>
<p>() 中为 true , 深拷贝 , 即复制标签也复制内容 ( 子节点 )</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> lili = ul.children[<span class="number">0</span>].cloneNode(<span class="literal">true</span>);</span><br><span class="line">ul.appendChild(lili);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103164117237.png" alt="image-20211103164117237" style="zoom:67%;border: solid" />    



<h2 id="21-9-动态创建元素-3种"><a href="#21-9-动态创建元素-3种" class="headerlink" title="21,9 动态创建元素(3种)"></a>21,9 动态创建元素(3种)</h2><ul>
<li><strong>innerHTML</strong></li>
<li><strong>createElement(标签名)</strong></li>
<li><strong>document.write()</strong></li>
</ul>
<p><strong>三者不同的区别 :</strong></p>
<ol>
<li><p>document.write() 是直接将内容写入页面的内容流 , ==但是文档流执行完毕 , 会导致页面的重绘==</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过点击按钮的形式添加一个元素进入页面</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.write(<span class="string">&#x27;&lt;h1&gt;我是h1标签&lt;/h1&gt;&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103164822907.png" alt="image-20211103164822907" style="zoom:67%;" />    点击按钮后     <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103164840956.png" alt="image-20211103164840956" style="zoom:67%;" />    </p>
</li>
<li><p>innerHTML 是将某个内容直接写入某个 DOM 节点 , 不会导致页面重绘</p>
</li>
<li><p>通过 innerHTML 创建元素 , 效率会高一些 , 结构比较复杂</p>
</li>
<li><p>createElement() 创建多个元素 , 效率会低一些 , 结构清晰</p>
</li>
</ol>
<h1 id="22-事件"><a href="#22-事件" class="headerlink" title="22, 事件"></a>22, 事件</h1><h2 id="22-1-注册事件的概述"><a href="#22-1-注册事件的概述" class="headerlink" title="22,1 注册事件的概述"></a>22,1 注册事件的概述</h2><p>给对应的元素添加事件 名称之为 ==注册事件== 或者 ==绑定事件==</p>
<p>注册事件两种方式 : ==传统方式和方法监听方式==</p>
<ul>
<li><p><strong>传统方式</strong></p>
<p>利用 on 开头的事件</p>
<ul>
<li>&lt;button onclick=”js…..”&gt;&lt;/button&gt;</li>
<li>btn.onclick = function() { …… }</li>
</ul>
<p><strong>特点 : 注册事件的 ==唯一性==</strong></p>
<p>同一个元素同一个事件只能绑定一个处理函数 , 最后注册的函数会覆盖之前的</p>
</li>
<li><p><strong>方法监听方式</strong></p>
<ul>
<li>w3c提供的标准的注册事件的方式</li>
<li><strong>通过 addEventListener() 函数注册</strong></li>
<li>IE9 之前不支持 , 可以使用 <strong>attachEvent()</strong> 代替</li>
<li><strong>特点 : 同一个元素同一个事件可以注册多个监听器</strong></li>
<li><strong>按照注册的顺序执行</strong></li>
</ul>
</li>
</ul>
<h2 id="22-2-addEventListener"><a href="#22-2-addEventListener" class="headerlink" title="22,2 addEventListener"></a>22,2 addEventListener</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ele.addEventListener(type , listener , useCaptrue)</span><br></pre></td></tr></table></figure>

<p>将指定的监听注册到 ele 元素对象智商 , 当该元素触发指定的事件时 , 就会执行处理函数</p>
<ul>
<li><strong>type</strong> : 事件类型的字符串 , 比如 : click , mouseover …. 开头没有 on</li>
<li><strong>listener</strong> : 事件处理程序 , 事件发生的时候 , 会调用这个函数</li>
<li><strong>useCaptrue</strong> : 可选 , 是一个布尔值 , 默认是false</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>传统事件注册方式<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;方法监听方式注册事件&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过点击按钮的形式添加一个元素进入页面</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;Hello,World~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;See You~~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> input = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;input&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    input.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;呵呵呵呵呵呵&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    input.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;嘿嘿嘿嘿嘿嘿&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103171315546.png" alt="image-20211103171315546" style="zoom:67%;" />    

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211103171337103.png" alt="image-20211103171337103" style="zoom:67%;" />    



<h2 id="22-3-删除事件"><a href="#22-3-删除事件" class="headerlink" title="22,3 删除事件"></a>22,3 删除事件</h2><ul>
<li><p>传统方式</p>
<p>元素对象.事件 = null</p>
</li>
<li><p>方法监听方式</p>
<p><strong>removeEventListener(事件类型 , 函数)</strong></p>
<p>样式</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> divs = <span class="built_in">document</span>.querySelectorAll(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    divs[<span class="number">0</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="number">666</span>);</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 传统的方式:删除事件</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.onclick = <span class="literal">null</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="number">888</span>);</span></span><br><span class="line"><span class="javascript">        divs[<span class="number">1</span>].removeEventListener(<span class="string">&#x27;click&#x27;</span>,fn);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 注意:这里的函数可以不写()</span></span></span><br><span class="line"><span class="javascript">    divs[<span class="number">1</span>].addEventListener(<span class="string">&#x27;click&#x27;</span>,fn);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="23-DOM事件流"><a href="#23-DOM事件流" class="headerlink" title="23, DOM事件流"></a>23, DOM事件流</h1><p><strong>事件流</strong> 描述的事从页面中接收事件的顺序</p>
<p><strong>事件</strong> 发生时在元素节点之间按照特地过的顺序传播 , <strong>==这个过程就是 DOM 事件流==</strong></p>
<p><strong>事件流分为三个阶段 :</strong></p>
<p><strong>1, 捕获阶段</strong></p>
<p><strong>2, 当前目标阶段</strong></p>
<p><strong>3, 冒泡阶段</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104135407374.png" alt="image-20211104135407374" style="zoom:67%;border: solid blue" />    

<p>**事件冒泡 : **IE浏览器最早提出的 , <strong>==事件开始由最具体的元素接收 , 然后逐级向上传播至最顶层节点==</strong></p>
<p>**事件捕获 : **网景最早提出的 , <strong>==由 DOM 最顶层节点开始 , 逐级向下传播到最具体的元素接收的过程==</strong></p>
<p>​    </p>
<p><strong>注意 :</strong></p>
<ol>
<li>JS 代码只能执行捕获或者冒泡一个阶段</li>
<li>onclick  和 attachEvent() 只能得到冒泡阶段的</li>
<li><strong>addEventListener(type , listener , useCapture)</strong> 第三个参数如果是 true , 代表事件在捕获阶段调用处理程序 , 如果是 false (默认不写 false) , 表示事件会在冒泡阶段调用处理程序</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span>son盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> son = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> father = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    son.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript">    father.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>捕获阶段 , 参数3 为 true </p>
<p>流程 : document -&gt; html -&gt; body -&gt; father -&gt; son</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104101635861.png" alt="image-20211104101635861" style="zoom:50%;" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104101648138.png" alt="image-20211104101648138" style="zoom:50%;" /></p>
<p>效果 : 先将father 的事件执行 , 在执行son的</p>
<p><strong>冒泡阶段</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span>son盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> son = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> father = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    son.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">    father.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>参数3 为 false , 处于冒泡阶段</p>
<p>流程 : son -&gt; father -&gt; body -&gt; html -&gt; document</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104101845130.png" alt="image-20211104101845130" style="zoom:67%;" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104101853605.png" alt="image-20211104101853605" style="zoom:67%;" /></p>
<p><strong>==在实际开发中很少利用捕获的特性 , 更关注冒泡==</strong></p>
<p><strong>有些事件是没有冒泡的 , onblur , onfocus , onmouseenter , onmouseleave</strong></p>
<h1 id="24-事件对象"><a href="#24-事件对象" class="headerlink" title="24, 事件对象"></a>24, 事件对象</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>123<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    div.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(event);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,event 就是一个对象,写在监听函数的()中,当成形参看</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 2,事件对象只有在触发事件之后才会存在,它是系统帮我们创建的,所以不用传递参数</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 3,事件对象中包含了一些与该事件相关的信息,比如鼠标点击事件包含了鼠标相关的信息</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 比如鼠标的坐标</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 4,对于这个时间对象的命名,event evt e</span></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="24-1-事件对象的属性和方法"><a href="#24-1-事件对象的属性和方法" class="headerlink" title="24,1 事件对象的属性和方法"></a>24,1 事件对象的属性和方法</h2><ul>
<li>**target : **返回 <strong>触发事件</strong> 的对象</li>
<li><strong>type :</strong> 返回事件的类型</li>
<li>**stopPropagation : **组止冒泡</li>
<li>**preventDefault() : **阻止默认行为 , 比如 : 超链接的跳转</li>
</ul>
<blockquote>
<p><strong>target</strong></p>
<p><strong>代码实例 : target 和 this 的区别</strong></p>
</blockquote>
<p><strong>区别 : this指向的事绑定事件的对象 , e.target 指向的事触发这个事件的对象</strong></p>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: skyblue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>123<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>abc<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">// e.target返回的事触发这个事件的对象</span></span><br><span class="line"><span class="comment">// this返回的是绑定这个时间的对象</span></span><br><span class="line">div.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(e.target);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line">ul.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 我们给ul绑定事件,但是触发这个事件的是li</span></span><br><span class="line">    <span class="built_in">console</span>.log(e.target);<span class="comment">// li元素</span></span><br><span class="line">    <span class="comment">// 我们给ul绑定事件,所以this指向ul</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">// ul</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104141709900.png" alt="image-20211104141709900" style="zoom:67%;border: solid" />        <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104141722553.png" alt="image-20211104141722553" style="zoom:67%;border:solid" /></p>
<blockquote>
<p><strong>type属性</strong></p>
<p><strong>代表触发事件的类型</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>123<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    div.addEventListener(<span class="string">&#x27;click&#x27;</span>,fn);</span></span><br><span class="line"><span class="javascript">    div.addEventListener(<span class="string">&#x27;mouseover&#x27;</span>,fn);</span></span><br><span class="line"><span class="javascript">    div.addEventListener(<span class="string">&#x27;mouseout&#x27;</span>,fn);</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 打印事件对象的类型</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.type);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104142336333.png" alt="image-20211104142336333" style="zoom: 50%;" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104142352437.png" alt="image-20211104142352437" style="zoom:67%;border:solid" /></p>
<blockquote>
<p><strong>stopPropagation()</strong></p>
<p>阻止冒泡</p>
</blockquote>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span>son盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 当前这种状态是事件的冒泡,第3个参数没写,默认是false</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> son = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> father = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    son.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;son&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        e.stopPropagation();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    father.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;father&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        e.stopPropagation();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;document&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104144240904.png" alt="image-20211104144240904" style="zoom: 50%;border: solid" />    



<blockquote>
<p><strong>preventDefault()</strong></p>
<p><strong>阻止默认事件</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://www.baidu.com/&quot;</span>&gt;</span>baidu一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com/&quot;</span> <span class="attr">method</span>=<span class="string">&quot;get&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;baidu一下&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> a = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;a&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    a.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 超链接的跳转功能阻止了</span></span></span><br><span class="line"><span class="javascript">        e.preventDefault();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 传统写法(优势: 没有兼容性问题)</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 这种写法仅限于传统方式</span></span></span><br><span class="line"><span class="javascript">    a.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;input&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 将提交按钮的提交功能阻止了</span></span></span><br><span class="line"><span class="javascript">        e.preventDefault();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104145226777.png" alt="image-20211104145226777">    <strong>==鼠标点击时没有完成链接跳转和表单提交的跳转功能==</strong></p>
<p><strong>案例 : 禁止鼠标选中和禁止鼠标右键</strong></p>
<ul>
<li><strong>contextmenu : 鼠标右键菜单</strong></li>
<li><strong>selectstart: 鼠标选中</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    小区内有802路公交车从小区门口始发，终点到尚水街，途径万达广场。<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    小区门口步行至旅顺南路，可乘坐的公交车有：2002路（旅顺至站北广场<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    ）、1121（龙王塘至和平广场）、1115（秀川街至河口）。还有快轨12号<span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    线蔡大岭站，距离地铁一号线河口站一站地</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// contextmenu : 禁止鼠标右键菜单</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;contextmenu&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        e.preventDefault();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// selectstart: 禁止鼠标选中</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;selectstart&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        e.preventDefault();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="24-2-事件委托"><a href="#24-2-事件委托" class="headerlink" title="24,2 事件委托"></a>24,2 事件委托</h2><p>咱班 43 个人 , 大家集体点外卖 , 如果一个一个送时间很长效率不高 , 领取的时候还要排队 , 话费事件更长</p>
<p>**解决方案 : **送餐员将这43份外卖全部交给老师 , 由老师带到教室发给同学</p>
<p>**优势 : **送餐员节省时间 , 直接委托给老师 , 同学领取也很方便</p>
<p><strong>==事件委托的原理 :==</strong></p>
<p><strong>==不给每个子节点单独设置事件监听 , 而是将事件监听设置在父节点上 , 然后利用冒泡的原理来影响每一个子节点==</strong></p>
<p>==前提 : 所有子节点的事件是统一的,而且处理程序一致==</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>请点击这个位置<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>请点击这个位置<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>请点击这个位置<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>请点击这个位置<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>请点击这个位置<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 事件委托的核心:给父元素添加监听器,利用事件冒泡影响每一个子节点</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;ul&#x27;</span>);</span><br><span class="line"><span class="comment">// 给ul注册事件,然后利用对象的 target获取点击的 li 元素</span></span><br><span class="line"><span class="comment">// 因为点击li,事件会冒泡到ul上,ul的注册事件就会触发监听器的处理程序</span></span><br><span class="line">ul.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    e.target.style.backgroundColor = <span class="string">&#x27;skyblue&#x27;</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<h2 id="24-3-鼠标事件对象"><a href="#24-3-鼠标事件对象" class="headerlink" title="24,3 鼠标事件对象"></a>24,3 鼠标事件对象</h2><p><strong>MouseEvent , 代表着和这个事件相关一系列信息的集合</strong></p>
<ul>
<li>clientX : 返回的是鼠标位于窗口可视区域的 X 坐标</li>
<li>clientY : 返回的是鼠标位于窗口可视区域的 Y 坐标</li>
<li>pageX : 返回的是鼠标位于网页文档的 X 坐标</li>
<li>pageY : 返回的是鼠标位于网页文档的 Y 坐标</li>
<li>screenX : 返回的是鼠标位于电脑屏幕的 X 坐标</li>
<li>screenY : 返回的是鼠标位于电脑屏幕的 Y 坐标</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 1,client 浏览器可视区域</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.clientX);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.clientY);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;==========&#x27;</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 2,page 页面文档的x 和 y</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.pageX);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.pageY);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;==========&#x27;</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">        <span class="comment">// 3,screen 鼠标在电脑屏幕中的x 和 y</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.screenX);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(e.screenY);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104155258974.png" alt="image-20211104155258974" style="zoom:67%;border: solid" />    



<p><strong>案例 : 移动的张飞</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">160px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/zhangfei.gif&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> img = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;img&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;mousemove&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// console.log(e.clientX + &#x27;:&#x27; + e.clientY)</span></span></span><br><span class="line"><span class="javascript">        img.style.left = e.clientX + <span class="string">&#x27;px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        img.style.top = e.clientY + <span class="string">&#x27;px&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104160731618.png" alt="image-20211104160731618" style="zoom:67%;border: solid" />    

<p>​    </p>
<h2 id="24-4-键盘事件对象"><a href="#24-4-键盘事件对象" class="headerlink" title="24,4 键盘事件对象"></a>24,4 键盘事件对象</h2><ul>
<li>**onkeyup : **键盘按键弹起的时候触发</li>
<li>**onkeydown : **键盘按键按下的时候触发</li>
<li>**onkeypress : **键盘按键按下的时候触发 , 不识别功能键 : Ctrl , shift , 箭头</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keyup&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我弹起了~~&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keydown&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我按下了~~down&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keypress&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我按下了~~press&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104161509034.png" alt="image-20211104161509034" style="zoom:50%;border: solid" />    

<p><strong>执行顺序 : down — press — up</strong></p>
<ul>
<li><p><strong>keyCode</strong></p>
<p>作用 : 返回该按键的 ASCII 码值</p>
<p>**注意 : **</p>
<ul>
<li><strong>keyup</strong> 和 <strong>keydown</strong> 事件不区分大小写 , a 和 A 都是 65</li>
<li><strong>keypress</strong> 事件区分大小写的 , a 对应 97 , A 对应 65</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keyup&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我弹起了:&#x27;</span> + e.keyCode);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keydown&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;down:&#x27;</span> + e.keyCode);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;keypress&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;press:&#x27;</span> + e.keyCode);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104162254280.png" alt="image-20211104162254280" style="zoom:67%;border:solid blue" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211104162315960.png" alt="image-20211104162315960" style="zoom: 67%;border: solid blue" />    </p>
</li>
</ul>
<h1 id="25-BOM"><a href="#25-BOM" class="headerlink" title="25, BOM"></a>25, BOM</h1><h2 id="25-1-什么是-BOM"><a href="#25-1-什么是-BOM" class="headerlink" title="25,1 什么是 BOM"></a>25,1 什么是 BOM</h2><p>BOM ( Browser Object Model ) <strong>==浏览器对象模型==</strong></p>
<p>BOM 由一系列对象组成 , 而且每个对象都提供对应的方法和属性</p>
<ul>
<li>将浏览器当做对象看待</li>
<li>BOM 的顶层对象 window</li>
<li>主要学习的事浏览器窗口交互的对象</li>
</ul>
<h2 id="25-2-BOM的构成"><a href="#25-2-BOM的构成" class="headerlink" title="25,2 BOM的构成"></a>25,2 BOM的构成</h2><p>BOM 比 DOM 更大 , 它其中包含了 DOM</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105092635492.png" alt="image-20211105092635492"></p>
<p>window 对象是顶级对象 , 他具有双重角色</p>
<ol>
<li><p>它是 JS 访问浏览器的窗口的借口</p>
</li>
<li><p>他还是全局对象 , 定义在全局作用域中的 , 函数和变量都会编程它的函数和属性</p>
<p>在使用的时候 window 可以省略不写 , 之前学习的 alert() , prompt() , confirm() 都是它的函数</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定于全局变量和函数</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">123</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我被执行了....&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.num);</span><br><span class="line"><span class="built_in">window</span>.func();</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105094240280.png" alt="image-20211105094240280">    </p>
<p>之前有讲到 name 不要用来命名 , 因为他是 window 已经定义好的属性</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105094443889.png" alt="image-20211105094443889">    </p>
<h1 id="26-window的常见事件"><a href="#26-window的常见事件" class="headerlink" title="26, window的常见事件"></a>26, window的常见事件</h1><h2 id="26-1-窗口加载事件"><a href="#26-1-窗口加载事件" class="headerlink" title="26,1 窗口加载事件"></a>26,1 窗口加载事件</h2><ul>
<li><p><strong>onload</strong></p>
<p><strong>==当文档内容完全加载完成后触发的时间 ( 图像 , 脚本 , css文件 ) , 就会调用对应 onload 事件的处理函数==</strong></p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 等待页面中所有的内容加载完成,执行这个函数</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 有了 onload js 可以写在页面中任意一个地方</span></span></span><br><span class="line"><span class="javascript">    onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&#x27;我被你点击了~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>点击事件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105095419445.png" alt="image-20211105095419445" style="zoom:67%;border: solid" />    

<p><strong>注意 :</strong></p>
<ol>
<li><p>有了 onload js 可以写在页面中任意一个地方 , 因为函数中内容会等待页面加载完成被执行</p>
</li>
<li><p>传统的注册方式只能写一次 , 如果写多个 , 会议最后一个为准</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 等待页面中所有的内容加载完成,执行这个函数</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 有了 onload js 可以写在页面中任意一个地方</span></span></span><br><span class="line"><span class="javascript">    onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&#x27;我被你点击了~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&#x27;别来烦我~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>点击事件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>如果使用 addEventListener 没有这个限制了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 通过方法监听的形式为页面添加加载事件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&#x27;我被你点击了~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            alert(<span class="string">&#x27;别来烦我啦~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>点击事件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105100205126.png" alt="image-20211105100205126" style="zoom:67%;border: solid blue" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105100227594.png" alt="image-20211105100227594" style="zoom:67%;border: solid blue" /></p>
</li>
</ol>
<ul>
<li><p><strong>DOMContentLoaded</strong></p>
<ul>
<li>仅仅当 DOM 结构加载完成后 , 就出发 , 不包括资源 ( CSS样式 , 图片 , flash ……. )</li>
<li>兼容性 , IE9 + 以上</li>
<li><strong>如果页面中图片很多 , 用户访问 onload 事件触发的时间会很长交互的效果不能实现 , 影响用户体验</strong></li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">&#x27;load&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">&#x27;我是onload事件&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;DOMContentLoaded&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">&#x27;我是DOMContentLoaded事件&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>先执行DOMContentLoaded事件</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105101332757.png" alt="image-20211105101332757" style="zoom:67%;border: solid blue" />        <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105101357683.png" alt="image-20211105101357683" style="zoom:67%;border: solid blue" /></p>
</li>
</ul>
<p><strong>==问 : load 和 DOMContentLoaded 有什么区别 ?==</strong></p>
<ul>
<li>load 等页面中内容全部加载完毕 , 包含 DOM 元素 和各种资源</li>
<li>DOMContentLoaded 是等 DOM 加载完毕</li>
</ul>
<h2 id="26-2-窗口调整大小事件"><a href="#26-2-窗口调整大小事件" class="headerlink" title="26,2 窗口调整大小事件"></a>26,2 窗口调整大小事件</h2><ul>
<li><p><strong>onresize</strong></p>
<p>当窗口的大小调整的时候, 触发这个事件中的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;窗口大小被调整了&#x27;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>==我们经常使用它左响应式开发 , innerWidth当前窗口宽度==</strong></p>
</li>
<li><p><strong>案例</strong> : 当用户调整窗口至一定大小的时候将 div 隐藏起来</p>
</li>
</ul>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: pink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 获取需要隐藏的元素对象</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> box = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#box&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.addEventListener(<span class="string">&#x27;resize&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 获取当前窗口的宽度</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="built_in">window</span>.innerWidth);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span>(<span class="built_in">window</span>.innerWidth &lt;= <span class="number">500</span>) &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&#x27;我藏起来了&#x27;</span>);</span></span><br><span class="line"><span class="javascript">            box.style.display = <span class="string">&#x27;none&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&#x27;我又出来了&#x27;</span>);</span></span><br><span class="line"><span class="javascript">            box.style.display = <span class="string">&#x27;block&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105134525072.png" alt="image-20211105134525072" style="zoom:50%;border: solid" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105134546842.png" alt="image-20211105134546842" style="zoom:50%;border: solid" />    </p>
<h2 id="26-3-this属性"><a href="#26-3-this属性" class="headerlink" title="26,3 this属性"></a>26,3 this属性</h2><ul>
<li>在绑定事件的函数中使用 , 指向的事绑定这个事件的元素对象</li>
<li>在构造函数中使用 , 指向的是这个构造函数创建的对象</li>
<li>如果在没有任何指向的情况下 , 直接使用 , 指向就是 <strong>window</strong> 这个对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">box.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br></pre></td></tr></table></figure>

<h2 id="26-4-window中的常用方法"><a href="#26-4-window中的常用方法" class="headerlink" title="    26,4 window中的常用方法"></a><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105135655115.png" alt="image-20211105135655115">    26,4 window中的常用方法</h2><p><strong>prompt() , alert , confirm() , setTimeout() , setInterval()</strong></p>
<ul>
<li>**open() : **打开一个新的窗口 , 加载指定的URL文档</li>
<li>**close() : **关闭浏览器窗口</li>
</ul>
<h1 id="27-定时器"><a href="#27-定时器" class="headerlink" title="27, 定时器"></a>27, 定时器</h1><p><strong>window 对象给我们提供了两个很好的方法 - ==定时器==</strong></p>
<ul>
<li><strong>setTimeout()</strong></li>
<li><strong>setInterval()</strong></li>
</ul>
<h2 id="27-1-setTimeout"><a href="#27-1-setTimeout" class="headerlink" title="27,1 setTimeout()"></a>27,1 setTimeout()</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.setTimeout(调用的函数,[延迟的毫秒数]);</span><br></pre></td></tr></table></figure>

<p><strong>作用 :</strong> 用于设置一个定时器 , 该定时器在到达指定的时间后调用第一个参数的函数</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// window是可以省略的</span></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 延迟时间为毫秒值,可以省略,不写默认是0</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">str</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(str + <span class="string">&#x27;时间到啦!!!!!!&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 在5000毫秒后调用fn这个函数</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">setTimeout</span>(fn,<span class="number">5000</span>);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 可以添加参数的写法,使用字符串</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">setTimeout</span>(<span class="string">&#x27;fn(\&#x27;张三\&#x27;)&#x27;</span>,<span class="number">5000</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105140844032.png" alt="image-20211105140844032" style="zoom:67%;border: solid" />    



<p><strong>==页面中可能会出现很多定时器 , 我们通常会给每个定义器进行命名==</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer1 = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;3秒钟到了......&#x27;</span>);</span><br><span class="line">&#125;,<span class="number">3000</span>);</span><br><span class="line"><span class="keyword">var</span> timer2 = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;5秒钟到了......&#x27;</span>);</span><br><span class="line">&#125;,<span class="number">5000</span>);</span><br></pre></td></tr></table></figure>

<p><strong>总结 :</strong></p>
<ol>
<li>window 可以省略</li>
<li>这个调用的函数可以直接写<strong>函数</strong> , 或者写<strong>函数名( 没有括号 )</strong> , 或者采用字符串的形式 <strong>‘函数名()’</strong></li>
<li>如果不写时间 , 默认是 0 毫秒</li>
<li>一个网页中会有多个定时器 , 需要给不同的定时器进行命名的区分</li>
</ol>
<ul>
<li><p><strong><font color=red>setTimeout中的函数被称为回调函数 , callback</font></strong></p>
<p>普通函数式按照代码的顺序直接调用的</p>
<p>回调函数 , <strong>需要等待的时间</strong> , 只有这个时间过去之后才会被执行</p>
</li>
</ul>
<p><strong>案例 : 5秒钟之后关闭广告</strong></p>
<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> auto;</span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">25px</span> <span class="number">10px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">3</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.none</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

 <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/corona.jpg&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> img = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;img&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        img.className = <span class="string">&#x27;none&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        alert(<span class="string">&#x27;告辞~~~~~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="number">5000</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105142549348.png" alt="image-20211105142549348" style="zoom:33%;border:solid" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105142625924.png" alt="image-20211105142625924" style="zoom:33%;border: solid" /></p>
<h2 id="27-2-停止setTimeout-定时器"><a href="#27-2-停止setTimeout-定时器" class="headerlink" title="27,2 停止setTimeout 定时器"></a>27,2 停止setTimeout 定时器</h2><p><strong>语法 :</strong> </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.clearTimeout(timeoutid);</span><br></pre></td></tr></table></figure>

<p>**作用 : **取消通过 setTimeout 定义的定时器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>清楚定时器<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;button&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> timer = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;时间到啦~~~&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;,<span class="number">5000</span>);</span></span><br><span class="line"><span class="javascript">    btn.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 填写的参数是定义好的定时器变量名</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">clearTimeout</span>(timer);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;定时器已经被清楚了!!!!&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105144727111.png" alt="image-20211105144727111" style="zoom:50%;border: solid" />    

<h2 id="27-3-setInterval"><a href="#27-3-setInterval" class="headerlink" title="27,3 setInterval()"></a>27,3 setInterval()</h2><p><strong>语法 :</strong> </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.setInterval(回调函数,[间隔的毫秒数]);</span><br></pre></td></tr></table></figure>

<p>**作用 : **函数会反复的调用回调函数 , 每个指定的间隔时间久调用一次</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;持续输出第&#x27;</span> + ++count + <span class="string">&#x27;次&#x27;</span>);</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105145434613.png" alt="image-20211105145434613" style="zoom: 50%;border: solid" />    

<p>​    </p>
<p><strong>==setInterval书写上的规范和setTimeout是一致==</strong></p>
<ul>
<li><strong>setTimeout 和 setInterval 的区别</strong><ul>
<li><strong>setTimeout</strong> 延时的时间到了 , 就回调这个函数 , 只调用一次 , 就结束定时器</li>
<li><strong>setInterval</strong> 每间隔延时的时间 , 就会调用一次 , 会调用多次</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>案例 : 倒计时</strong></p>
<p>案例分析 : </p>
<ul>
<li>倒计时是不停的变化的 , 需要的事setInterval</li>
<li>三个黑色的盒子分别存放时分秒</li>
<li>三个盒子利用 innerHTML 将时间写入</li>
</ul>
</li>
</ul>
<h2 id="27-4-停止-setInterval-定时器"><a href="#27-4-停止-setInterval-定时器" class="headerlink" title="27,4 停止 setInterval 定时器"></a>27,4 停止 setInterval 定时器</h2><p><strong>语法 :</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.clearInterval(intervalID);</span><br></pre></td></tr></table></figure>

<p>**作用 : **取消之前通过 clearInterval 设定的定时器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;begin&quot;</span>&gt;</span>开启定时器<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;stop&quot;</span>&gt;</span>关闭定时器<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 1,获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> begin = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.begin&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> stop = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.stop&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 定义全局变量记录次数</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> count = <span class="number">0</span>;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> timer = <span class="literal">null</span></span></span><br><span class="line"><span class="javascript">    begin.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;定时器开始....&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">console</span>.log(<span class="string">&#x27;计时: &#x27;</span> + ++count + <span class="string">&#x27;次&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        &#125;,<span class="number">1000</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 定义清楚定时器</span></span></span><br><span class="line"><span class="javascript">    stop.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">&#x27;定时器结束了....&#x27;</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">clearInterval</span>(timer);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211105155059696.png" alt="image-20211105155059696">    </p>
<h1 id="28-JS执行队列"><a href="#28-JS执行队列" class="headerlink" title="28, JS执行队列"></a>28, JS执行队列</h1><h2 id="28-1-JS是单线程"><a href="#28-1-JS是单线程" class="headerlink" title="28,1 JS是单线程"></a>28,1 JS是单线程</h2><p>JavaScript 语言是一个单线程的语言 , 也就是说 , 同一时间只能做一件事</p>
<p>Js 这个语言诞生之初有一个弱点就是单线程 , 原因就是 js 事一个为了处理页面用户交互的语言 , 其操作主要是由 DOM 衍生的</p>
<p>对于 DOM 的操作 , 就是对元素的操作 (添加 , 删除) , 这些操作是无法同时进行的 , 必须先添加再删除</p>
<p>单线程意味着 , 所有的任务需要排队 , 前面执行完之后 , 才能执行后面的</p>
<p><strong>问题 : JS 的执行时间过长 , 页面的渲染布不连贯 , 有阻塞的感觉</strong></p>
<h2 id="28-2-同步和异步"><a href="#28-2-同步和异步" class="headerlink" title="28,2 同步和异步"></a>28,2 同步和异步</h2><p>为了解决这个问题 , 利用多核CPU的计算能力 , H5的WebWorker提出的标准 , 允许 JS 脚本创建多个线程 , 于是 JS 中出现了==同步和异步==</p>
<ul>
<li>同步</li>
</ul>
<p>上一个任务执行完成后 , 再去执行下一个任务 , 程序执行的顺序和任务排列的顺序是一致的</p>
<p>例如 : 做饭 = 烧水 , 等水开 , 切菜 , 炒菜 ……</p>
<ul>
<li>异步</li>
</ul>
<p>你在做一件事的时候 , 因为这件事会花费很长时间 , 在这个期间 ,你还可以去处理其他的事情 </p>
<p>例如 : 做饭 = 烧水 , 利用谁开的过程去切菜 ,然后炒菜</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">				首先会打印第一句话</span></span><br><span class="line"><span class="comment">				由于第二个任务花费的时间较长,它可以同时运行第三个务</span></span><br><span class="line"><span class="comment">				不会等到 1 秒钟后再去执行第三个任务</span></span><br><span class="line"><span class="comment">				所以在执行第二个任务的等待时间执行了第三个任务</span></span><br><span class="line"><span class="comment">			 */</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line">&#125;,<span class="number">1000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<p>虽然 JS 是单线程的语言 ,但是也支持多个任务</p>
<p><font color = 'red'><strong>本质上的区别 : 多个任务在同一个流水线上执行的顺序不一样</strong></font></p>
<p><strong>问 : 为啥 , 延迟时间是 0 还是相同的结果</strong></p>
<p><strong>因为 JS 为了防止我们的任务有一个等待较长的时间 , 将任务分为两个大类</strong></p>
<ul>
<li><p>同步任务</p>
<p>同步任务同时位于主线程中 , 形成一个 <strong>执行栈</strong></p>
</li>
<li><p><strong>异步任务</strong></p>
<p>js 的异步任务都是通过回调函数实现的</p>
<p>异步任务分为三种类型</p>
<ul>
<li>普通事件 : click , resize</li>
<li>资源加载 : load , error</li>
<li>定时器 : setTimeout , setInterval</li>
</ul>
<p>异步任务相关的函数会被添加到 **任务队列(任务队列也被称为消息队列)**中</p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211109153427051.png" alt="image-20211109153427051" style="zoom:67%;" />    </li>
</ul>
<h2 id="28-3-JS-的执行机制"><a href="#28-3-JS-的执行机制" class="headerlink" title="28,3 JS 的执行机制"></a>28,3 JS 的执行机制</h2><ol>
<li><strong>先执行栈中的同步任务</strong></li>
<li><strong>异步任务会被放入任务队列</strong></li>
<li><strong>一旦执行栈中的同步任务执行完毕 , 系统依次读取==任务队列==中的异步任务</strong></li>
</ol>
<h1 id="29-location对象"><a href="#29-location对象" class="headerlink" title="29 location对象"></a>29 location对象</h1><h2 id="29-1-什么是location对象"><a href="#29-1-什么是location对象" class="headerlink" title="29,1 什么是location对象"></a>29,1 什么是location对象</h2><p><strong>window 对象给我们提供了一个location属性用于获取和设置窗体的 URL, 并且可以解析URL</strong></p>
<p><strong>由于这个属性会返回一个对象 , 所以我们将这个属性称之为 location 对象</strong></p>
<h2 id="29-2-URL"><a href="#29-2-URL" class="headerlink" title="29,2 URL"></a>29,2 URL</h2><p><strong><font color = 'red'>统一资源定位符(Uniform Resource Locator)</font></strong> , 是互联网上标准的资源地址</p>
<p>互联网上每一个网页文件都有一个唯一的URL , 它包含的信息指出文件的位置 , 以及浏览器的处理方式</p>
<p>URL 语法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">protocol: <span class="comment">//host[:port]/path/[?query]#fragment</span></span><br></pre></td></tr></table></figure>

<ul>
<li>protocl : 通信协议 , http , https , ftp , maito</li>
<li>host : 主机地址(域名)</li>
<li>port : 端口号 , 可以省略 因为http协议是80</li>
<li>path : 路径 , 是由0个或者多个/分割开的字符串 , 代表的是主机上的目录和文件地址</li>
<li>query : 请求参数 , 以键值对呈现</li>
<li>fragment : 常用于超链接的锚点</li>
</ul>
<h2 id="29-3-location属性"><a href="#29-3-location属性" class="headerlink" title="29,3 location属性"></a>29,3 location属性</h2><ul>
<li><strong>href :</strong> 获取和设置整个 URL</li>
<li>**host : ** 返回主机的域名</li>
<li><strong>port :</strong> 返回端口号</li>
<li><strong>pathname :</strong> 返回路径</li>
<li>**search : **返回参数</li>
<li>**hash : **返回 #后面的内容 ,  常用于超链接的锚点</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过window对象获取location对象</span></span><br><span class="line"><span class="keyword">var</span> l = <span class="built_in">window</span>.location;</span><br><span class="line"><span class="built_in">console</span>.log(l);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> l);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;URL:&#x27;</span> + l.href);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;主机:&#x27;</span> + l.host);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;端口:&#x27;</span> + l.port);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;地址:&#x27;</span> + l.pathname);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;参数:&#x27;</span> + l.search);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;hash:&#x27;</span> + l.hash);</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211109152718404.png" alt="image-20211109152718404" style="zoom:80%;border: solid" />



<ul>
<li><p><strong>案例 : 5秒钟后跳转至对应的网页</strong></p>
<p>分析 :</p>
<ol>
<li><p>利用定时器制作倒计时的效果</p>
</li>
<li><p>时间到了 , 就跳转页面 , 使用 location.href (<a target="_blank" rel="noopener" href="https://www.sina.com.cn/">https://www.sina.com.cn/</a>)</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211109154530255.png" alt="image-20211109154530255">    </p>
</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;info&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> info = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#info&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> times = <span class="number">5</span>;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">countDown</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        info.innerHTML = times-- + <span class="string">&#x27;秒后跳转至主页&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">if</span>(times == <span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="javascript">            location.href = <span class="string">&#x27;https://www.sina.com.cn/&#x27;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    countDown();</span></span><br><span class="line"><span class="javascript">    <span class="built_in">setInterval</span>(countDown,<span class="number">1000</span>);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<ul>
<li><p><strong>案例 : 5秒钟跳转至对应的网页</strong></p>
<p>分析 : </p>
<p>利用定时器制作倒计时的效果</p>
<p>时间到了 , 就跳转页面 , 使用 location.href()</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> time = <span class="number">5</span>;</span><br><span class="line"><span class="comment">// setInterval(function() &#123;</span></span><br><span class="line"><span class="comment">// 	div.innerHTML = &#x27;页面没有找到 , &#x27; + time + &#x27;秒之后带你进入首页&#x27;;</span></span><br><span class="line"><span class="comment">// 	time--;</span></span><br><span class="line"><span class="comment">// &#125;,1000);</span></span><br><span class="line"><span class="comment">// setTimeout(function()&#123;</span></span><br><span class="line"><span class="comment">// 	location.href = &#x27;https://www.sina.com.cn/&#x27;;</span></span><br><span class="line"><span class="comment">// &#125;,5000);</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    div.innerHTML = time-- + <span class="string">&#x27;秒后跳转至主页&#x27;</span>;</span><br><span class="line">    <span class="keyword">if</span>(time == <span class="number">0</span>) &#123;</span><br><span class="line">        location.href = <span class="string">&#x27;https://www.sina.com.cn/&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">setInterval</span>(countDown,<span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>案例 : URL传参</strong><ul>
<li>登录页面 , 里面是表单提交 , 提交到Index页面</li>
<li>index页面可以使用登录页面的参数 , 实现多个数据不同页面之间的传参(利用location.search这个属性)</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录页面<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;index.html&quot;</span><span class="attr">method</span>=<span class="string">&quot;get&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>用户名 <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;un&quot;</span>/&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;登录&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>欢迎页面<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;info&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;un&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>, 欢迎回来~~~~</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> un = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;#un&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> name = location.search.split(<span class="string">&#x27;=&#x27;</span>)[<span class="number">1</span>];</span></span><br><span class="line"><span class="javascript">    un.innerHTML = name;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="29-4-location-的方法"><a href="#29-4-location-的方法" class="headerlink" title="29,4 location 的方法"></a>29,4 location 的方法</h2><ul>
<li><p><strong>assign() :</strong> 跟href一样 , 可以跳转页面(重定向页面)</p>
</li>
<li><p><strong>replace() :</strong> 替换当前页面 , 不记录历时 , 没有办法后退</p>
</li>
<li><p><strong>reload() :</strong> 重新加载页面 , 相当于刷新按钮 或者F5  , 如果参数为true 代表强制刷新 Ctrl + F5</p>
<p>普通刷新从缓存中读取 , 强制刷新从服务器中读取</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;assign&quot;</span>&gt;</span>assign跳转<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;replace&quot;</span>&gt;</span>replace替换<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">class</span>=<span class="string">&quot;reload&quot;</span>&gt;</span>reload刷新<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript">		</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> assign = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.assign&#x27;</span>)</span></span><br><span class="line"><span class="javascript">    assign.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        location.assign(<span class="string">&#x27;http://www.baidu.com&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> replace = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.replace&#x27;</span>)</span></span><br><span class="line"><span class="javascript">    replace.addEventListener(<span class="string">&#x27;click&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        location.replace(<span class="string">&#x27;http://www.baidu.com&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> reload = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.reload&#x27;</span>)</span></span><br><span class="line"><span class="javascript">    reload.addEventListener(<span class="string">&#x27;click&#x27;</span> ,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        location.reload(<span class="literal">true</span>);</span></span><br><span class="line"><span class="javascript">    &#125;)</span></span><br></pre></td></tr></table></figure>





<h1 id="30-Navigator"><a href="#30-Navigator" class="headerlink" title="30, Navigator"></a>30, Navigator</h1><p>现在的网站中如果用户使用 PC 端登录 , 显示的是PC端的网页</p>
<p>如果使用手机登录同一个网址 , 显示的是移动端的页面</p>
<p><strong>问 : 如何实现同一网址在不同终端的显示效果 , 如果知道用户使用哪个浏览器打开</strong></p>
<h2 id="30-1-Navigtor"><a href="#30-1-Navigtor" class="headerlink" title="30,1 Navigtor"></a>30,1 Navigtor</h2><p>Navigator 对象包含了有关浏览器的信息 , 它有很多的属性 , 最常用的是 <strong>userAgent</strong> ,该属性返回由客户端发送到服务器的 user-agent 头部信息</p>
<ul>
<li><strong>案例 : 判断用户登录的终端 ,手机显示手机端 , PC显示PC端</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 如果 user-agent 头信息中包含 iphone 之间将页面转移至移动端</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span>(<span class="regexp">/iphone/i</span>.test(navigator.userAgent)) &#123;</span></span><br><span class="line"><span class="javascript">        location.href = <span class="string">&#x27;移动端.html&#x27;</span>;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前是PC端<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>当前是移动端<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>





<h1 id="31-History对象"><a href="#31-History对象" class="headerlink" title="31, History对象"></a>31, History对象</h1><p>window 对象给我们提供了一个 history 对象 , 与浏览器历史记录相关进行交互, 该对象包含在用户 ( 浏览器窗口中 ) 访问的 URL</p>
<ul>
<li>history 的方法<ul>
<li>**back() : **可以实现后腿功能</li>
<li>**forward() : **实现前进功能</li>
<li>**go(参数) : **前进和后退功能 , 如果是数字1就是前进1个页面 , 如果是 -1 就是后腿一个页面</li>
</ul>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;next.html&quot;</span>&gt;</span>next页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;forward&quot;</span>&gt;</span>forward()按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;go1&quot;</span>&gt;</span>go(1)按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> forward = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.forward&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> go1 = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.go1&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    forward.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 通过history对象的forward方法实现页面的前进功能</span></span></span><br><span class="line"><span class="javascript">        history.forward();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    go1.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 通过history对象的go方法实现前进1个页面的功能</span></span></span><br><span class="line"><span class="javascript">        history.go(<span class="number">2</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110104618297.png" alt="image-20211110104618297">    </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;back&quot;</span>&gt;</span>back()按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;go&quot;</span>&gt;</span>go(-1)按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> back = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.back&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> go = <span class="built_in">document</span>.querySelector(<span class="string">&#x27;.go&#x27;</span>);</span></span><br><span class="line"><span class="javascript">    back.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 通过history对象的forward方法实现页面的前进功能</span></span></span><br><span class="line"><span class="javascript">        history.back();</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">    go.addEventListener(<span class="string">&#x27;click&#x27;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 通过history对象的forward方法实现页面的前进功能</span></span></span><br><span class="line"><span class="javascript">        history.go(-<span class="number">2</span>);</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110104630868.png" alt="image-20211110104630868">    </p>
<h1 id="32-原型"><a href="#32-原型" class="headerlink" title="32, 原型"></a>32, 原型</h1><h2 id="32-1-原型prototype"><a href="#32-1-原型prototype" class="headerlink" title="32,1 原型prototype"></a>32,1 原型prototype</h2><p>我们所创建的函数都是 <strong>function</strong> 类型的对象 , 函数名称就是对象名</p>
<p>我们每创建一个函数 , 解析器都会向函数中添加一个属性 <strong>prototype</strong></p>
<p>==注意 : 如果函数作为普通函数调用 , prototype没有任何作用==</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 声明一个构造函数</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">MyClass</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过函数名调用prototype属性</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(MyClass.prototype);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110101003169.png" alt="image-20211110101003169">    </p>
<h2 id="32-2-显示原型和隐式原型"><a href="#32-2-显示原型和隐式原型" class="headerlink" title="32,2 显示原型和隐式原型"></a>32,2 显示原型和隐式原型</h2><ul>
<li><p><strong>显示原型 : prototype</strong></p>
</li>
<li><p><strong>隐式原型 : __proto__</strong></p>
<p>==当函数以构造函数的形式调用的时候 , <strong>它所创建的对象都会有一个隐含的属性</strong> , 这个属性指向构造函数的原型对象, 我们可以通过 <strong>__proto__</strong> 来访问这个属性==</p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 声明一个构造函数</span></span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">MyClass</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过函数名调用prototype属性</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(MyClass.prototype);</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过MyClass()创建对象</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> mc = <span class="keyword">new</span> MyClass();</span></span><br><span class="line"><span class="javascript">    <span class="comment">// mc的__proto__ 指向构造函数的prototype对象</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(mc.__proto__);</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(mc.__proto__ === MyClass.prototype); <span class="comment">// true</span></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110100704923.png" alt="image-20211110100704923">    </p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110101334997.png" alt="image-20211110101334997" style="zoom: 50%;" />    



<p><strong>原型相当于一个公共的区域 , 所有的同一个类型的实例都可以访问这原型对象, 我们可以将这些对象同共有的内容 , 统一设置到原型中去</strong></p>
<p><strong>当我们访问对象的一个属性的时候 , 它会现在对象的自身中寻找 , 如果有直接使用 , 如果没有会去原型对象中寻找 , 如果找到就直接使用</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 向MyClass的原型对象添加了一个a属性</span></span><br><span class="line">MyClass.prototype.a = <span class="number">123</span>;</span><br><span class="line"><span class="comment">// 测试mc2中是否可以获得 a</span></span><br><span class="line"><span class="comment">// mc2本身没有a属性,所以回去原型中去找</span></span><br><span class="line"><span class="keyword">var</span> mc2 = <span class="keyword">new</span> MyClass();</span><br><span class="line"><span class="built_in">console</span>.log(mc2.a);<span class="comment">// 123</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 向mc2中添加一个a属性</span></span><br><span class="line">mc2.a = <span class="string">&#x27;我是mc2的a属性&#x27;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(mc2.a);</span><br><span class="line"><span class="keyword">var</span> mc3 = <span class="keyword">new</span> MyClass();</span><br><span class="line"><span class="built_in">console</span>.log(mc3.a);<span class="comment">// 123</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110102618684.png" alt="image-20211110102618684">    </p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110102950690.png" alt="image-20211110102950690" style="zoom:50%;" />    



<h2 id="32-3-原型链"><a href="#32-3-原型链" class="headerlink" title="32,3 原型链"></a>32,3 原型链</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">MyClass</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">				</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 只要给构造函数的原型对象添加属性</span></span><br><span class="line"><span class="comment">// 这个属性将被这个构造函数所创建的所有对象共有</span></span><br><span class="line">MyClass.prototype.abc = <span class="string">&#x27;我是原型中的属性&#x27;</span>;</span><br><span class="line"><span class="keyword">var</span> mc1 = <span class="keyword">new</span> MyClass();</span><br><span class="line"><span class="comment">// 通过mc1对象调用原型中的abc属性</span></span><br><span class="line"><span class="built_in">console</span>.log(mc1.abc);</span><br><span class="line"></span><br><span class="line"><span class="comment">// in关键字</span></span><br><span class="line"><span class="comment">// 使用in关键字检查对象是否包含某个属性,如果对象没有,原型有,放回true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;abc&#x27;</span> <span class="keyword">in</span> mc1);<span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// hasOwnProperty(): 检查对象自身是否含有该属性</span></span><br><span class="line"><span class="comment">// 只有对象自身中含有这个属性的时候才会返回true</span></span><br><span class="line"><span class="built_in">console</span>.log(mc1.hasOwnProperty(<span class="string">&#x27;abc&#x27;</span>));<span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<p>==问: hasOwnProperty是谁的==</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 问: hasOwnProperty是谁的</span></span><br><span class="line"><span class="built_in">console</span>.log(mc1.hasOwnProperty(<span class="string">&#x27;hasOwnProperty&#x27;</span>));<span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过对象的隐式原型检查对象的原型</span></span><br><span class="line"><span class="built_in">console</span>.log(mc1.__proto__.hasOwnProperty(<span class="string">&#x27;hasOwnProperty&#x27;</span>));<span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<p><strong>原型对象也是对象 , 所以它也有原型 , 当我们使用一个对象的属性和方法的时候 , 会在对象的自身中寻找同名的属性和方法进行调用 , 如果没有则去原型对象中寻找 , 如果原型对象中有 , 直接使用 , 如果还没有 , 则去原型的原型中去寻找</strong></p>
<p><strong>直到找到 Object 对象的原型为止 , Object对象的原型没有原型 , 如果在Object中还没有找到,则返回undefined</strong></p>
<p>==注意 : 创建函数的时候最好在一个构造函数的原型对象中创建 , 为了不受全局变量的影响==</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 向构造函数的原型对象中添加一个方法</span></span><br><span class="line">MyClass.prototype.sayHello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;Hello~~~&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用相同名称重新赋值</span></span><br><span class="line"><span class="keyword">var</span> sayHello = <span class="string">&#x27;66666&#x27;</span>;</span><br><span class="line"><span class="comment">// 通过MyClass创建对象掉一共sayHello()</span></span><br><span class="line"><span class="keyword">var</span> mc = <span class="keyword">new</span> MyClass();</span><br><span class="line">mc.sayHello();</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110141251203.png" alt="image-20211110141251203">    </p>
<h2 id="32-4-call-和-apply"><a href="#32-4-call-和-apply" class="headerlink" title="32,4 call 和 apply"></a>32,4 call 和 apply</h2><p><strong>==这个两个方法是function 对象的方法 , 需要通过普通函数对象来调用==</strong></p>
<p>当函数对象调用这两个方法的时候都是在执行函数中的代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;我是fun方法~~&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 方法名就是函数对象名</span></span><br><span class="line">fun.call();</span><br><span class="line">fun.apply();</span><br></pre></td></tr></table></figure>

<p><strong>作用 : 当调用call 和 apply的时候可以将对象指定为第一个参数 , 此时这个对象将会称为ui函数执行时的 this</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> zs = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;张三&#x27;</span>,</span><br><span class="line">    <span class="attr">sayName</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是:&#x27;</span> + <span class="built_in">this</span>.name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> ls = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;李四&#x27;</span>,</span><br><span class="line">    <span class="attr">sayName</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是:&#x27;</span> + <span class="built_in">this</span>.name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name);</span><br><span class="line">&#125;</span><br><span class="line">fun2();<span class="comment">// this指向window,name为window的属性值</span></span><br><span class="line"><span class="comment">// 代表将fun2函数中this变为zs</span></span><br><span class="line">fun2.call(zs);</span><br><span class="line">fun2.call(ls);</span><br><span class="line"><span class="comment">// 一个对象在执行函数的时候可以指定this指向别人</span></span><br><span class="line">zs.sayName.call(ls);<span class="comment">// 我是李四</span></span><br><span class="line">fun2.apply(zs);</span><br><span class="line">ls.sayName.apply(zs);<span class="comment">// 我是张三</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110143031986.png" alt="image-20211110143031986" style="zoom:67%;" />    



<ul>
<li><strong>区别</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun3</span>(<span class="params">a,b</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;a = &#x27;</span> + a);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;b = &#x27;</span> + b);</span><br><span class="line">&#125;</span><br><span class="line">fun3.call(obj);</span><br><span class="line"><span class="comment">// 对象后面的参数为方法的实参</span></span><br><span class="line"><span class="comment">// call 方法可以将实参在对象之后依次传递</span></span><br><span class="line">fun3.call(obj,<span class="number">1</span>,<span class="number">2</span>);</span><br><span class="line"><span class="comment">// apply 方法需要将实参封装到一个数组中统一传递</span></span><br><span class="line">fun3.apply(obj,[<span class="number">1</span>,<span class="number">2</span>]);</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/03-JavaScript.assets/image-20211110145006344.png" alt="image-20211110145006344">    </p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">lee</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.cai2.wang/2021/12/01/Done/JavaScript/">http://blog.cai2.wang/2021/12/01/Done/JavaScript/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.cai2.wang" target="_blank">李世龙</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/javaScript/">javaScript</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_Freelancer_re_irh4.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2022/05/16/Done/Git/"><img class="prev-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_web_development_w2vv.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">常用Git命令</div></div></a></div><div class="next-post pull-right"><a href="/2021/11/20/Done/jQuery/"><img class="next-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_social_girl_562b.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">jQuery</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2022/08/23/Js常用数组/" title="Js常用数组"><img class="cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_dev_productivity_umsq.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-08-23</div><div class="title">Js常用数组</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AF-JavaScript"><span class="toc-number">1.</span> <span class="toc-text">1, 什么是 JavaScript</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-JavaScript-%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">1.1.</span> <span class="toc-text">1,1 JavaScript 的作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-HTML-CSS-JavaScript"><span class="toc-number">1.2.</span> <span class="toc-text">1,2 HTML&#x2F;CSS&#x2F;JavaScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-3-%E6%B5%8F%E8%A7%88%E5%99%A8%E6%89%A7%E8%A1%8C-JS"><span class="toc-number">1.3.</span> <span class="toc-text">1,3 浏览器执行 JS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-4-JS-%E7%9A%84%E7%BB%84%E6%88%90%E9%83%A8%E5%88%86"><span class="toc-number">1.4.</span> <span class="toc-text">1,4 JS 的组成部分</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-JS-%E7%9A%84%E4%B8%89%E7%A7%8D"><span class="toc-number">2.</span> <span class="toc-text">2, JS 的三种</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-%E8%A1%8C%E5%86%85%E5%BC%95%E5%85%A5-JS"><span class="toc-number">2.1.</span> <span class="toc-text">2,1 行内引入 JS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-%E5%86%85%E5%B5%8C%E5%BC%8F%E5%BC%95%E5%85%A5"><span class="toc-number">2.2.</span> <span class="toc-text">2,2 内嵌式引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-%E5%A4%96%E9%83%A8%E5%BC%95%E5%85%A5"><span class="toc-number">2.3.</span> <span class="toc-text">2,3 外部引入</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-JS-%E4%B8%AD%E7%9A%84%E6%B3%A8%E9%87%8A"><span class="toc-number">3.</span> <span class="toc-text">3, JS 中的注释</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-JS-%E4%B8%AD%E7%9A%84%E8%BE%93%E5%85%A5%E8%BE%93%E5%87%BA%E8%AF%AD%E5%8F%A5"><span class="toc-number">4.</span> <span class="toc-text">4, JS 中的输入输出语句</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#5-%E5%8F%98%E9%87%8F"><span class="toc-number">5.</span> <span class="toc-text">5, 变量</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#5-1-%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">5.1.</span> <span class="toc-text">5,1 变量的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-2-%E5%8F%98%E9%87%8F%E4%BD%BF%E7%94%A8%E7%9A%84%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="toc-number">5.2.</span> <span class="toc-text">5,2 变量使用的特殊情况</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-3-%E5%8F%98%E9%87%8F%E7%9A%84%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83"><span class="toc-number">5.3.</span> <span class="toc-text">5,3 变量的命名规范</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#6-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.</span> <span class="toc-text">6, 数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#6-1-JS%E4%B8%AD%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%88%86%E7%B1%BB"><span class="toc-number">6.1.</span> <span class="toc-text">6,1 JS中数据类型的分类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-2-%E5%8F%98%E9%87%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.2.</span> <span class="toc-text">6,2 变量的数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-3-Number-%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.3.</span> <span class="toc-text">6,3 Number 类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-4-%E5%AD%97%E7%AC%A6%E4%B8%B2-String"><span class="toc-number">6.4.</span> <span class="toc-text">6,4 字符串 String</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-5-Boolean"><span class="toc-number">6.5.</span> <span class="toc-text">6,5 Boolean</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-6-Undefined-%E5%92%8C-Null"><span class="toc-number">6.6.</span> <span class="toc-text">6,6 Undefined 和 Null</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-7-%E8%8E%B7%E5%8F%96%E5%8F%98%E9%87%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.7.</span> <span class="toc-text">6,7 获取变量的数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-8-%E5%AD%97%E9%9D%A2%E9%87%8F"><span class="toc-number">6.8.</span> <span class="toc-text">6,8 字面量</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#7-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BD%AC%E6%8D%A2"><span class="toc-number">7.</span> <span class="toc-text">7, 数据类型的转换</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#7-1-%E8%BD%AC%E6%8D%A2%E4%B8%BAString"><span class="toc-number">7.1.</span> <span class="toc-text">7,1 转换为String</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-2-%E8%BD%AC%E6%8D%A2-number"><span class="toc-number">7.2.</span> <span class="toc-text">7,2 转换 number</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#7-3-%E8%BD%AC%E6%8D%A2-boolean"><span class="toc-number">8.</span> <span class="toc-text">7,3 转换 boolean</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#8-%E8%A7%A3%E9%87%8A%E5%9E%8B%E8%AF%AD%E8%A8%80%E5%92%8C%E7%BC%96%E8%AF%91%E5%9E%8B%E7%9A%84%E8%AF%AD%E8%A8%80"><span class="toc-number">9.</span> <span class="toc-text">8, 解释型语言和编译型的语言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#9-JS%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.</span> <span class="toc-text">9, JS运算符</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#9-1-%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.1.</span> <span class="toc-text">9,1 算数运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-2-%E9%80%92%E5%A2%9E-%E5%87%8F%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.2.</span> <span class="toc-text">9,2 递增,减运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-3-%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.3.</span> <span class="toc-text">9,3 比较运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-4-%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.4.</span> <span class="toc-text">9,4 逻辑运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-5-%E7%9F%AD%E8%B7%AF%E8%BF%90%E7%AE%97-%E9%80%BB%E8%BE%91%E4%B8%AD%E6%96%AD"><span class="toc-number">10.5.</span> <span class="toc-text">9,5 短路运算 (逻辑中断)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-6-%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">10.6.</span> <span class="toc-text">9,6 赋值运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-7-%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">10.7.</span> <span class="toc-text">9,7 优先级</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#10-%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6"><span class="toc-number">11.</span> <span class="toc-text">10, 流程控制</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#10-1-%E9%A1%BA%E5%BA%8F%E7%BB%93%E6%9E%84"><span class="toc-number">11.1.</span> <span class="toc-text">10,1 顺序结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-2-%E5%88%86%E6%94%AF%E7%BB%93%E6%9E%84"><span class="toc-number">11.2.</span> <span class="toc-text">10,2 分支结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-3-if-%E8%AF%AD%E5%8F%A5"><span class="toc-number">11.3.</span> <span class="toc-text">10,3 if 语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-4-if-else-%E5%8F%8C%E5%88%86%E6%94%AF"><span class="toc-number">11.4.</span> <span class="toc-text">10,4 if else 双分支</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-5-if-else-if-%E5%A4%9A%E5%88%86%E6%94%AF"><span class="toc-number">11.5.</span> <span class="toc-text">10,5 if else if 多分支</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-6-%E4%B8%89%E5%85%83%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">11.6.</span> <span class="toc-text">10,6 三元表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-7-%E5%88%86%E6%94%AF%E8%AF%AD%E5%8F%A5-switch-case"><span class="toc-number">11.7.</span> <span class="toc-text">10,7 分支语句 switch case</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-8-switch-%E5%92%8C-if-else-if-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">11.8.</span> <span class="toc-text">10,8 switch 和 if else if 的区别</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#11-JavaScript%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6%E4%B9%8B%E5%BE%AA%E7%8E%AF"><span class="toc-number">12.</span> <span class="toc-text">11, JavaScript流程控制之循环</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#11-1-for"><span class="toc-number">12.1.</span> <span class="toc-text">11,1 for</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-2-while"><span class="toc-number">12.2.</span> <span class="toc-text">11,2 while</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-3-do-while"><span class="toc-number">12.3.</span> <span class="toc-text">11,3 do while</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-4-break-amp-continue"><span class="toc-number">12.4.</span> <span class="toc-text">11,4 break &amp; continue</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#12-JavaScript%E6%95%B0%E7%BB%84"><span class="toc-number">13.</span> <span class="toc-text">12, JavaScript数组</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#12-1-%E6%95%B0%E7%BB%84%E7%9A%84%E5%88%9B%E5%BB%BA"><span class="toc-number">13.1.</span> <span class="toc-text">12,1 数组的创建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-2-%E6%95%B0%E7%BB%84%E7%9A%84%E4%B8%8B%E6%A0%87"><span class="toc-number">13.2.</span> <span class="toc-text">12,2 数组的下标</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-3-%E6%95%B0%E7%BB%84%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">13.3.</span> <span class="toc-text">12,3 数组的遍历</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-4-JS%E6%95%B0%E7%BB%84%E6%96%B0%E5%A2%9E%E5%85%83%E7%B4%A0"><span class="toc-number">13.4.</span> <span class="toc-text">12,4 JS数组新增元素</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-1-%E9%80%9A%E8%BF%87%E4%BF%AE%E6%94%B9length%E9%95%BF%E5%BA%A6"><span class="toc-number">13.4.1.</span> <span class="toc-text">12,4,1 通过修改length长度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-2-%E9%80%9A%E8%BF%87%E4%BF%AE%E6%94%B9%E6%95%B0%E7%BB%84%E7%9A%84%E7%B4%A2%E5%BC%95"><span class="toc-number">13.4.2.</span> <span class="toc-text">12,4,2 通过修改数组的索引</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-5-%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F"><span class="toc-number">13.5.</span> <span class="toc-text">12,5 冒泡排序</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#13-%E5%87%BD%E6%95%B0"><span class="toc-number">14.</span> <span class="toc-text">13, 函数</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#13-1-%E5%87%BD%E6%95%B0%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">14.1.</span> <span class="toc-text">13,1 函数的概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-2-%E5%87%BD%E6%95%B0%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">14.2.</span> <span class="toc-text">13,2 函数的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-3-%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0"><span class="toc-number">14.3.</span> <span class="toc-text">13,3 函数的参数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-4-%E5%BD%A2%E5%8F%82%E5%92%8C%E5%AE%9E%E5%8F%82%E5%8C%B9%E9%85%8D%E9%97%AE%E9%A2%98"><span class="toc-number">14.4.</span> <span class="toc-text">13,4 形参和实参匹配问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-5-%E5%87%BD%E6%95%B0%E7%9A%84%E8%BF%94%E5%9B%9E%E5%80%BC"><span class="toc-number">14.5.</span> <span class="toc-text">13,5 函数的返回值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-6-break-continue-return-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">14.6.</span> <span class="toc-text">13,6 break continue return 的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-7-arguments-%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">14.7.</span> <span class="toc-text">13,7 arguments 的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-8-%E5%87%BD%E6%95%B0%E4%B9%8B%E9%97%B4%E7%9A%84%E8%B0%83%E7%94%A8"><span class="toc-number">14.8.</span> <span class="toc-text">13,8 函数之间的调用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-9-%E5%A3%B0%E6%98%8E%E5%87%BD%E6%95%B0%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">14.9.</span> <span class="toc-text">13,9 声明函数的两种方式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#14-JS-%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">15.</span> <span class="toc-text">14, JS 的作用域</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#14-1-%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">15.1.</span> <span class="toc-text">14,1 作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-2-JS%E4%B8%AD%E7%9B%AE%E5%89%8D%E6%B2%A1%E6%9C%89%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">15.2.</span> <span class="toc-text">14,2 JS中目前没有块级作用域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-3-%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE"><span class="toc-number">15.3.</span> <span class="toc-text">14,3 作用域链</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#15-JS%E9%A2%84%E8%A7%A3%E6%9E%90"><span class="toc-number">16.</span> <span class="toc-text">15, JS预解析</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#15-1-%E5%8F%98%E9%87%8F%E5%92%8C%E5%87%BD%E6%95%B0%E4%BD%BF%E7%94%A8%E7%9A%84%E7%89%B9%E6%AE%8A%E6%83%85%E5%86%B5"><span class="toc-number">16.1.</span> <span class="toc-text">15,1 变量和函数使用的特殊情况</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-2-JS%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%A7%E8%A1%8C%E8%BF%87%E7%A8%8B"><span class="toc-number">16.2.</span> <span class="toc-text">15,2 JS代码的执行过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-3-%E9%A2%84%E8%A7%A3%E6%9E%90%E7%9A%84%E5%88%86%E7%B1%BB"><span class="toc-number">16.3.</span> <span class="toc-text">15,3 预解析的分类</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#16-JS%E5%AF%B9%E8%B1%A1"><span class="toc-number">17.</span> <span class="toc-text">16, JS对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#16-1-%E4%BB%80%E4%B9%88%E6%98%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">17.1.</span> <span class="toc-text">16,1 什么是对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-2-%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E5%AF%B9%E8%B1%A1"><span class="toc-number">17.2.</span> <span class="toc-text">16,2 为什么需要对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-3-%E5%88%9B%E5%BB%BA%E5%AF%B9%E8%B1%A1%E7%9A%843%E6%96%B9%E5%BC%8F"><span class="toc-number">17.3.</span> <span class="toc-text">16,3 创建对象的3方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-4-new-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">17.4.</span> <span class="toc-text">16,4 new 关键字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-5-%E9%81%8D%E5%8E%86%E5%AF%B9%E8%B1%A1"><span class="toc-number">17.5.</span> <span class="toc-text">16,5 遍历对象</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#17-JS-%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">18.</span> <span class="toc-text">17, JS 的内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#17-1-Math"><span class="toc-number">18.1.</span> <span class="toc-text">17,1 Math</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-2-Math-%E4%B8%AD%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0"><span class="toc-number">18.2.</span> <span class="toc-text">17,2 Math 中的常用函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-3-Date"><span class="toc-number">18.3.</span> <span class="toc-text">12,3 Date</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-4-Array"><span class="toc-number">18.4.</span> <span class="toc-text">12,4 Array</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-1-instanceof"><span class="toc-number">18.4.1.</span> <span class="toc-text">12,4,1 instanceof</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-2-%E5%88%A0%E9%99%A4%E6%B7%BB%E5%8A%A0%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="toc-number">18.4.2.</span> <span class="toc-text">12,4,2 删除添加数组中的元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-3-%E6%95%B0%E7%BB%84%E7%9A%84%E6%8E%92%E5%BA%8F"><span class="toc-number">18.4.3.</span> <span class="toc-text">12,4,3 数组的排序</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-4-%E8%8E%B7%E5%8F%96%E6%95%B0%E7%BB%84%E4%B8%AD%E5%85%83%E7%B4%A0%E7%9A%84%E7%B4%A2%E5%BC%95"><span class="toc-number">18.4.4.</span> <span class="toc-text">12,4,4 获取数组中元素的索引</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-5-%E6%95%B0%E7%BB%84%E8%BD%AC%E5%8C%96%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">18.4.5.</span> <span class="toc-text">12,4,5 数组转化字符串</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-4-6-%E6%95%B0%E7%BB%84%E7%9A%84%E5%85%B6%E4%BB%96%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">18.4.6.</span> <span class="toc-text">12,4,6 数组的其他的方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-5-String"><span class="toc-number">18.5.</span> <span class="toc-text">12,5 String</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-1-%E5%9F%BA%E6%9C%AC%E5%8C%85%E8%A3%85%E7%B1%BB%E5%9E%8B"><span class="toc-number">18.5.1.</span> <span class="toc-text">12,5,1 基本包装类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%98%AF%E4%B8%8D%E5%8F%AF%E5%8F%98%E5%BE%97"><span class="toc-number">18.5.2.</span> <span class="toc-text">12,5,2 字符串是不可变得</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">18.5.3.</span> <span class="toc-text">12,5,3 字符串中的方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-4-%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%AD%E7%9A%84%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95"><span class="toc-number">18.5.4.</span> <span class="toc-text">12,5,4 字符串中的操作方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-6-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">18.6.</span> <span class="toc-text">12,6 正则表达式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-6-1-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E6%A6%82%E8%BF%B0"><span class="toc-number">18.6.1.</span> <span class="toc-text">12,6,1 正则表达式概述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-6-2-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BF%AE%E9%A5%B0%E7%AC%A6%E5%92%8C"><span class="toc-number">18.6.2.</span> <span class="toc-text">12,6,2 正则表达式修饰符和 []</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-6-3-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%92%8C%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%87%BD%E6%95%B0"><span class="toc-number">18.6.3.</span> <span class="toc-text">12,6,3 字符串和正则表达式的函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-6-4-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E9%87%8F%E8%AF%8D"><span class="toc-number">18.6.4.</span> <span class="toc-text">12,6,4 正则表达式量词</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-6-5-%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%85%83%E5%AD%97%E7%AC%A6"><span class="toc-number">18.6.5.</span> <span class="toc-text">12,6,5 正则表达式的元字符</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#13-%E7%AE%80%E5%8D%95%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%A4%8D%E6%9D%82%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">19.</span> <span class="toc-text">13,简单数据类型和复杂数据类型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#13-1-%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%88%86%E9%85%8D"><span class="toc-number">19.1.</span> <span class="toc-text">13,1 数据类型的分配</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#14-DOM"><span class="toc-number">20.</span> <span class="toc-text">14, DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#14-1-DOM-%E7%AE%80%E4%BB%8B"><span class="toc-number">20.1.</span> <span class="toc-text">14,1 DOM 简介</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#15-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">21.</span> <span class="toc-text">15, 获取元素</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#15-1-%E9%80%9A%E8%BF%87-id-%E8%8E%B7%E5%8F%96"><span class="toc-number">21.1.</span> <span class="toc-text">15,1 通过 id 获取</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-2-%E9%80%9A%E8%BF%87%E6%A0%87%E7%AD%BE%E5%90%8D%E7%A7%B0%E8%8E%B7%E5%8F%96"><span class="toc-number">21.2.</span> <span class="toc-text">15,2 通过标签名称获取</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-3-H5%E6%96%B0%E5%A2%9E%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">21.3.</span> <span class="toc-text">15,3 H5新增获取元素的方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-4-%E8%8E%B7%E5%8F%96%E7%89%B9%E6%AE%8A%E5%85%83%E7%B4%A0"><span class="toc-number">21.4.</span> <span class="toc-text">15,4 获取特殊元素</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#16-%E4%BA%8B%E4%BB%B6"><span class="toc-number">22.</span> <span class="toc-text">16, 事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#16-1-%E4%BA%8B%E4%BB%B6%E6%A6%82%E8%BF%B0"><span class="toc-number">22.1.</span> <span class="toc-text">16,1 事件概述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-2-%E5%B8%B8%E8%A7%81%E4%BA%8B%E4%BB%B6"><span class="toc-number">22.2.</span> <span class="toc-text">16,2 常见事件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#17-%E6%93%8D%E4%BD%9C%E5%85%83%E7%B4%A0"><span class="toc-number">23.</span> <span class="toc-text">17, 操作元素</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#17-1-%E6%94%B9%E5%8F%98%E5%85%83%E7%B4%A0%E5%86%85%E5%AE%B9"><span class="toc-number">23.1.</span> <span class="toc-text">17,1 改变元素内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-2-%E5%B8%B8%E8%A7%81%E7%9A%84%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><span class="toc-number">23.2.</span> <span class="toc-text">17,2 常见的元素属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-3-%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%9E%E6%80%A7"><span class="toc-number">23.3.</span> <span class="toc-text">17,3 表单元素的属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-4-%E4%BF%AE%E6%94%B9%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7"><span class="toc-number">23.4.</span> <span class="toc-text">17,4 修改样式属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#18-%E6%8E%92%E4%BB%96%E6%80%9D%E6%83%B3"><span class="toc-number">24.</span> <span class="toc-text">18, 排他思想</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#19-%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">25.</span> <span class="toc-text">19, 元素属性的操作</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#19-1-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><span class="toc-number">25.1.</span> <span class="toc-text">19,1 获取元素属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-2-%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><span class="toc-number">25.2.</span> <span class="toc-text">19,2 设置元素属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-3-%E8%AE%BE%E7%BD%AE%E5%B1%9E%E6%80%A7%E5%80%BC"><span class="toc-number">25.3.</span> <span class="toc-text">19,3 设置属性值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-4-%E7%A7%BB%E9%99%A4%E5%B1%9E%E6%80%A7"><span class="toc-number">25.4.</span> <span class="toc-text">19,4 移除属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#20-H5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">26.</span> <span class="toc-text">20, H5自定义属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#20-1-%E8%AE%BE%E7%BD%AEH5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">26.1.</span> <span class="toc-text">20,1 设置H5自定义属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-2-%E8%8E%B7%E5%8F%96H5%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">26.2.</span> <span class="toc-text">20,2 获取H5自定义属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#21-%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C"><span class="toc-number">27.</span> <span class="toc-text">21, 节点操作</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#21-1-%E4%B8%BA%E4%BD%95%E4%BD%BF%E7%94%A8%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C"><span class="toc-number">27.1.</span> <span class="toc-text">21,1 为何使用节点操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-2-%E8%8A%82%E7%82%B9%E6%A6%82%E8%BF%B0"><span class="toc-number">27.2.</span> <span class="toc-text">21,2 节点概述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-3-%E7%88%B6%E7%BA%A7%E8%8A%82%E7%82%B9"><span class="toc-number">27.3.</span> <span class="toc-text">21,3 父级节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-4-%E5%AD%90%E8%8A%82%E7%82%B9"><span class="toc-number">27.4.</span> <span class="toc-text">21,4 子节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-5-%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9"><span class="toc-number">27.5.</span> <span class="toc-text">21,5 兄弟节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-6-%E5%88%9B%E5%BB%BA%E5%92%8C%E6%B7%BB%E5%8A%A0"><span class="toc-number">27.6.</span> <span class="toc-text">21,6 创建和添加</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-7-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9"><span class="toc-number">27.7.</span> <span class="toc-text">21,7 删除节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-8-%E5%A4%8D%E5%88%B6%E8%8A%82%E7%82%B9"><span class="toc-number">27.8.</span> <span class="toc-text">21,8 复制节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-9-%E5%8A%A8%E6%80%81%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0-3%E7%A7%8D"><span class="toc-number">27.9.</span> <span class="toc-text">21,9 动态创建元素(3种)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#22-%E4%BA%8B%E4%BB%B6"><span class="toc-number">28.</span> <span class="toc-text">22, 事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#22-1-%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6%E7%9A%84%E6%A6%82%E8%BF%B0"><span class="toc-number">28.1.</span> <span class="toc-text">22,1 注册事件的概述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-2-addEventListener"><span class="toc-number">28.2.</span> <span class="toc-text">22,2 addEventListener</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-3-%E5%88%A0%E9%99%A4%E4%BA%8B%E4%BB%B6"><span class="toc-number">28.3.</span> <span class="toc-text">22,3 删除事件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#23-DOM%E4%BA%8B%E4%BB%B6%E6%B5%81"><span class="toc-number">29.</span> <span class="toc-text">23, DOM事件流</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#24-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">30.</span> <span class="toc-text">24, 事件对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#24-1-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95"><span class="toc-number">30.1.</span> <span class="toc-text">24,1 事件对象的属性和方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-2-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">30.2.</span> <span class="toc-text">24,2 事件委托</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-3-%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">30.3.</span> <span class="toc-text">24,3 鼠标事件对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-4-%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">30.4.</span> <span class="toc-text">24,4 键盘事件对象</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#25-BOM"><span class="toc-number">31.</span> <span class="toc-text">25, BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#25-1-%E4%BB%80%E4%B9%88%E6%98%AF-BOM"><span class="toc-number">31.1.</span> <span class="toc-text">25,1 什么是 BOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-2-BOM%E7%9A%84%E6%9E%84%E6%88%90"><span class="toc-number">31.2.</span> <span class="toc-text">25,2 BOM的构成</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#26-window%E7%9A%84%E5%B8%B8%E8%A7%81%E4%BA%8B%E4%BB%B6"><span class="toc-number">32.</span> <span class="toc-text">26, window的常见事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#26-1-%E7%AA%97%E5%8F%A3%E5%8A%A0%E8%BD%BD%E4%BA%8B%E4%BB%B6"><span class="toc-number">32.1.</span> <span class="toc-text">26,1 窗口加载事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-2-%E7%AA%97%E5%8F%A3%E8%B0%83%E6%95%B4%E5%A4%A7%E5%B0%8F%E4%BA%8B%E4%BB%B6"><span class="toc-number">32.2.</span> <span class="toc-text">26,2 窗口调整大小事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-3-this%E5%B1%9E%E6%80%A7"><span class="toc-number">32.3.</span> <span class="toc-text">26,3 this属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-4-window%E4%B8%AD%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">32.4.</span> <span class="toc-text">    26,4 window中的常用方法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#27-%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">33.</span> <span class="toc-text">27, 定时器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#27-1-setTimeout"><span class="toc-number">33.1.</span> <span class="toc-text">27,1 setTimeout()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-2-%E5%81%9C%E6%AD%A2setTimeout-%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">33.2.</span> <span class="toc-text">27,2 停止setTimeout 定时器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-3-setInterval"><span class="toc-number">33.3.</span> <span class="toc-text">27,3 setInterval()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-4-%E5%81%9C%E6%AD%A2-setInterval-%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">33.4.</span> <span class="toc-text">27,4 停止 setInterval 定时器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#28-JS%E6%89%A7%E8%A1%8C%E9%98%9F%E5%88%97"><span class="toc-number">34.</span> <span class="toc-text">28, JS执行队列</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#28-1-JS%E6%98%AF%E5%8D%95%E7%BA%BF%E7%A8%8B"><span class="toc-number">34.1.</span> <span class="toc-text">28,1 JS是单线程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-2-%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5"><span class="toc-number">34.2.</span> <span class="toc-text">28,2 同步和异步</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-3-JS-%E7%9A%84%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6"><span class="toc-number">34.3.</span> <span class="toc-text">28,3 JS 的执行机制</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#29-location%E5%AF%B9%E8%B1%A1"><span class="toc-number">35.</span> <span class="toc-text">29 location对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#29-1-%E4%BB%80%E4%B9%88%E6%98%AFlocation%E5%AF%B9%E8%B1%A1"><span class="toc-number">35.1.</span> <span class="toc-text">29,1 什么是location对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-2-URL"><span class="toc-number">35.2.</span> <span class="toc-text">29,2 URL</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-3-location%E5%B1%9E%E6%80%A7"><span class="toc-number">35.3.</span> <span class="toc-text">29,3 location属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-4-location-%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">35.4.</span> <span class="toc-text">29,4 location 的方法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#30-Navigator"><span class="toc-number">36.</span> <span class="toc-text">30, Navigator</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#30-1-Navigtor"><span class="toc-number">36.1.</span> <span class="toc-text">30,1 Navigtor</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#31-History%E5%AF%B9%E8%B1%A1"><span class="toc-number">37.</span> <span class="toc-text">31, History对象</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#32-%E5%8E%9F%E5%9E%8B"><span class="toc-number">38.</span> <span class="toc-text">32, 原型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#32-1-%E5%8E%9F%E5%9E%8Bprototype"><span class="toc-number">38.1.</span> <span class="toc-text">32,1 原型prototype</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-2-%E6%98%BE%E7%A4%BA%E5%8E%9F%E5%9E%8B%E5%92%8C%E9%9A%90%E5%BC%8F%E5%8E%9F%E5%9E%8B"><span class="toc-number">38.2.</span> <span class="toc-text">32,2 显示原型和隐式原型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-3-%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">38.3.</span> <span class="toc-text">32,3 原型链</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32-4-call-%E5%92%8C-apply"><span class="toc-number">38.4.</span> <span class="toc-text">32,4 call 和 apply</span></a></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2022 By lee</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">这是footer</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (true){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>